JS笔试题合集(包含少量的HTML & CSS)-日常笔记

1.JS随机生成N个长度的字符

1.随机数
2.N个长度，需要用到循环
3.字符：随机数生成后需要拼接，可用到数组。

function aa(N){
	var arr =[];//定义一个数组，用来拼接字符
	for(var i=0;i<N;i++){//N个长度
		var ran = Math.foor(Math.random()*10);//生成随机数
		arr.push(ran);//在数组最后添加生成的随机数
	}
	console.log(arr.join(""));//使用join转换为字符
}
aa(10);//生成10个长度的字符

2.若a=1，b=2在不使用第三个变量的情况下，交换a和b的值。（至少两种）

//方法1
var a = 1, b = 2;
a = a + b; // a=3
b = a - b; // b = 3-2; b=1;
a = a - b; // a = 3 - 1; a=2;
console.log(a,b); // a=2 , b=1

//方法2
var a = 1, b = 2;
console.log([a,b],[b,a]); // ES6语法 1,2  2,1

//方法3

var  a = 1, b = 2;
a = [a,b];
a = a[1];
b = a[0];
console.log(a,b); // 2,1

//方法4
var  a = 1, b = 2;
a = [b , b = a]; // a[0] = 2, a[1] = 1
console.log(a)	// 2,1

3.判断回文（如：level就为回文）

1.回文就是字符‘正’过来和‘倒’过来是一样的 主要：reverse() 数组的反转
2.可以把字符转换为数组 date.split("")
3.使用反转属性 reverse() 把数组倒过来
4.把数组转换成字符串 join("");
5.比较

var date = 'level';
var arr = date.split("").reverse().join("");
date == arr? console.log(true) : console.log(false);

4.以下代码输出什么，并简要说明。

var a = false
var b = a/0
if(a){
	console.log(a * 2 + '2' + 4)
}else{
	console.log(!a * 2 + '2' + 4)
}

1.a / 0 返回的是 false / 0 值为 NaN 不是一个数
2.之后a为false 所以进入else
3. !a = true a为false 取反则为 true 等于 1
4. console.log(1 * 2 + ‘2’ +4)
5. 结果为：224

5.请问下列代码输出什么，并简要说明！

function a(xx){
	this.x = xx;
	return this;
}
var x = a(5);
var y = a(6);

console.log(x.x);
console.log(y.x);

1.普通函数中的 this 指向的是 window
2.所以在 a()中 可以理解成在 window 上添加了一个属性为 x，并返回 window
3.var x = a(5)，其实 x = window;
4.所以 x.x 等于undefined 因为 window.window
5.var y = a(6), y = window ，并把window.x = 6
6.y.x = 6
7.输出为 ，undefined 6

6. 下列程序输出的是什么？

var myObject = {
    foo: 'bar',
    func: function () {
    	var self = this;
    	console.log(this.foo==myObject.foo); // 指向的是myObject对象 所以 this.foo == myObject.self
    	console.log(self==this);   // self == myObject 所以 self.foo == this.foo == myObject.self
    	(function(){
          console.log(this==window);  // 普通函数中的 this => window 所以 this.foo == window.foo => undefined
          console.log(self == myObject); // self == myObject 所以 self.foo == myObject => bar
    	}());
   	}
}
myObject.func(); // bar bar undefined bar

1. 主要考点：this指向问题！
2. 在对象中，this指向的是对象本身，函数中通常指向的是 window
3. 结果为：bar bar undefined bar

7. 请写出异步加载的JS方案

// 1. async 只加载外部脚本。
// 2. defer 只能IE使用，在文档解析完成之后才会执行。
// 3.
function loadScript(url,fun){
	var script = document.createElement('script');
	if(script.readyState){ // IE兼容性
		script.onreadystatechange = function(){
			if(script.readState == 'complete' || script.readState == 'loaded'){
				fun();
			}
		}
	}else{
		script.onload = function(){
			fun();
		}
	}
	script.src = url;
	document.head.appendChild(script);
}
load('js/index.js',function(){
	a();
})

8. 如今有一个ul里面有十亿个li，要求点击li触发事件，并弹出li对应的类容。

1.主要考点：JS事件委托

var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e){
	var a = e.targent || e.srcElement;
	console.log(a);
}

9. 数组去重,要求在原型链上编程

function arr_fun(){
	var arr = ['a','b','c','a','b','c'];
	var arr_ = [];
	for(var i in arr){
		if(arr_.indexOf(arr[i])==-1){
		arr_.push(arr[i]);
		}
	}
}
Array.prototype.arr_fun;

10. push() 、pop()、shift()、unshift()分别是什么功能？

这个就是偏理论的题目了啦！

1. push() : 在数组的尾部添加一个或者多个元素，并返回数组的新长度。
2. pop() : 删除数组的最后一个元素，并返回被删除的值。
3. shift() : 删除数组的第一个元素，并返回。
4. unshift() : 在数组的头部添加一个或者多个元素，并返回数组的新长度。

11. 原型链的继承

function Dog() {}
Dog.prototype.bark = function() {
	console.log('汪汪')
}
function Cat() {}
Cat.prototype = new Dog()
var c = new Cat()
c.bark(); // 汪汪

12. 描述一下JS时间线的顺序、状态和触发函数

1. 浏览器开始解析页面，状态为loading
2. 遇到外部的文件创建线程加载，碰到没有设置async或者defer的JS文件阻塞加载。
3. 文档解析完成，状态为interactive触发DOMContentLoaded事件
4. 所有文档下载完成，状态为complete 或者 loaded，window触发onload事件

13.请写出冒泡排序的代码

function fun(arr){
	for(var i =0; i<arr.length; i++){
		for(var j = 0; j<arr.length; j++){
			if(arr[j]>arr[j+1]){
				var big = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = big;
			}
		}
	}
	return arr;
}

14.描述一下预编译的过程

1. 函数在执行的一瞬间，创建一个对象
2. 形参作为对象的属性名，实参作为对象的属性值
3. 变量名作为对象的属性名，值为undefined如果和参数同名，不做改变
4. 函数名作为对象的属性名，值为函数体，若跟参数或者变量同名 直接覆盖

15. HTML标签上的title 和 alt 两个属性的区别是?

注意：title 属性并不是img标签特有的属性，大部分的标签都有。

title：是大部分标签都有的属性，是鼠标移上去时的提示信息
alt：是img标签的属性，是图片资源加载异常时显示的类容

以上是我遇到的一些笔试题，并持续更新中