前端面试题中的送命题

1.值和引用的问题，看下面代码输出结果

	var a = [1,2,3];
	var b = a;
	b.push(4); // a,b数组指向同一个数组，改变b,a也变
	console.log(a); // [1,2,3,4]
	console.log(b); // [1,2,3,4]
		
	var a = [1,2,3];
	var b = a;
	b = [4,5,6];
	console.log(a); // [1,2,3]
	console.log(b); // [4,5,6] b重新指向了一个新的数组地址
    
    // concat 拼接数组
	var a = [1,2,3];
    var b = a.concat([]);
    a.push(4);
    console.log(a); // [1,2,3,4]
    console.log(b); // [1,2,3]

	function change(x) {
		x.push(4);
		x; // [1,2,3,4]
		// 继续
		x = [5,6,7];
		x.push(8);
		x; // [5,6,7,8]
	}
	var a = [1,2,3];
	change(a);
	a; // 值为[1,2,3,4]，而不是[5,6,7,8]

	// 标量基本类型值不可更改
	function foo(x) {
		// 传进来的x参数是数字对象中拆分出来的
		x = x + 1;
		x;// 3
	}
	var a = 2;
	var b = new Number(a); // 如果一个数字对象的标量基本类型值是2，那么该值就不能修改，除非创建一个包含新值的数字对象
	foo(b);
	console.log(b); // 是2，而不是3
	
	Number.prototype.valueOf = function() {
		return 3;
	}
	new Number(2) == 3; // true,调用了valueOf方法，所以这里是相等的
	
	false == 0; // true
	false == ''; // true
	false == []; // true
	[] == []; // false
	null == undefined // true

	2+3+'7'; // "57"  加上一个字符串会拼接
	Math.max() < Math.min(); // true 在不传参数情况下Math.max()返回-infinity

	// 函数声明提前
	function test() {
        console.log(a); // undefined
        foo(); // foo
        var a = 0;
        function foo() {
            console.log('foo');
        }
    }
    test();

	var a = 1;
	var obj = {b: 20}
	function test(i) {
		i--;
		obj.b--;
	}
	console.log(a + '' + obj.b); // 1  19

---

2.下面我们来看一下闭包的问题，何为闭包，内部函数调用了外部的变量，函数执行完变量并不会释放，形成了闭包。合理利用闭包，闭包容易造成内存的泄漏。

	// 闭包问题，一秒后输出10个10
	for (var i = 0; i < 10; i++) {
	    setTimeout(() => {
	      console.log(i);
	    }, 1000);
	}
	// 立即执行函数，输出0到9
	for (var i = 0; i < 10; i++) {
	    (function(i) {
	      console.log(i);
	    })(i);
	}
	// let 块级作用域，可解决闭包问题 输出0到9
	for (let i = 0; i < 10; i++) {
	    setTimeout(() => {
	      console.log(i);
	    }, 1000);
	}

3.简述一下浏览器的垃圾回机制？
在以前的ie浏览器中，垃圾回收机制采用的是引用计数法，即在程序执行中，声明或引用一次，它的次数就加一，同理重新声明一次，次数减一，当它为0时，他就会被浏览器清除回收了。这种做法暴露了一个问题，那就是如果变量自己引用自己或者循环引用时那它就不会被标记为0，也就不会被浏览器回收；所以目前主流浏览器都采用标记清除法来做垃圾回收，即程序执行了当前依赖的变量，该变量被标记为进入环境，当该方法执行完成了，变量又被标记为离开环境，所以离开环境的就自然被回收了。

4.css如何画一个三角形？（一个像素点的本质，是由四个三角形组成的）

	.demo{
         width:0px;
         height:0px;
         border-top:5px solid transparent; // transparent透明属性，可随意调节三角形方向
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         border-bottom: 5px solid red;
     }

5.函数防抖动（在项目中很多搜索以及新增变更的接口都要做函数防抖动处理，防止用户网卡时一直点击按钮一直调接口，数据库可能进入脏数据）

data() {
	return {
		timer: null
	}
}
// 当你在间隔的时间内连续一直点击按钮执行这个方法，它每次进来都先清理定时器，所以逻辑代码并没有执行，等你停止点击，它会执行最后一次的定时器任务
function add() {
	this.timer = null; // 每次点击这个方法，就把定时器里的代码清理
	this.timer = setTimeout(() => {
		// 这里执行程序的逻辑代码以及调接口
	}, 300);
}

6.对象克隆引发的一系列问题。

var obj = {
	name: 'jack',
	age: 12,
	tag: {
		fea: 'handsome',
		sys: 'tall'
	},
	normalArr: [1,2,3],
	time: new Date(),
	reg: '/abc/ig'
}
var obj1 = {
	age: 10
}

// 浅复制
var a = obj; // 赋值的方法
var b = Object.assign({},obj,obj1); // Object.assign方法，可复制多个对象，后面的对象属性覆盖前面的，所以b.age = 10;
var c = {...obj}; // 拓展运算符，也是浅复制
// 如何判断是浅复制还是深复制了一个对象，复制来的对象b.name = 'changName';obj和b对象都修改了
b.name = 'changeName';//  b和obj都改了name属性

// 深复制
var d = JSON.parse(JSON.stringify(obj)); // 将对象转成JSON格式，再转回来，这种方法只能复制简单的JSON格式数据，如果有日期格式，正则，undefined等属性值复制出来的对象属性会缺失
// 递归克隆对象,遇到对象属性递归调用，继续clone,
function clone(obj) {
	if (typeof obj == null) return null;
	if (typeof obj != 'object') return obj;
	if (obj.constructor == Date) return new Date(obj);
	if (obj.constructor == RegExp) return new RegExp(obj);
	let result = obj.constructor(); // 继承obj的原型上的方法与属性
	for (let key in obj) {
		if (obj.hasOwnProperty(key)) { //过滤掉该对象原型链上属性
			result[key] = typeof obj[key] == 'object' ? arguments.callee(obj[key]) : obj[key];
		}
	}
	return result;
}
let e = clone(obj); // e和obj对象指向的地址不一样

// 同样的，数组扁平化处理,将多维数组展开成一维数组，如果需要去重或排序可以用[...new Set(arr)]和sort((a,b) => {return a - b;})
//数组去重和排序的方法很多建议都去了解掌握一下，常问的有冒泡，快速排序以及选择排序
let arr = [1,[2,3,[4,5,[6,7,[8]]]]];
// 方法一es6的flat方法,注意：js是由BOM,DOM,ECMAScript(简称es)三部分组成
let newArr = arr.flat(Infinity);
// 方法二 toSting实现,转成字符串，在截取成数组，这时每一项还是字符串，再把它转成数字
let newArr1 = arr.toString().split(',').map(Number);
// 方法三 递归实现，和克隆对象一样，判断该项是否为数组，为数组继续递归
......

7. console.log([‘1’, ‘2’, ‘3’].map(parseInt));？？？？你知道结果吗？乍一看你直接回答[1,2,3],那么恭喜你，答错了，答案是[1,NaN,NaN],建议你看一下parseInt(string, radix)方法。

8.你能说一下盒模型吗？
盒模型分两种，ie盒模型和W3C标准盒模型，ie盒模型也叫怪异盒模型，它的width宽度包括border，padding,content.而W3C盒模型的width仅是内容的宽度。两者之间的切换是：box-sizing:border-box;box-sizing:content-box;浏览器默认content-box（W3C标准盒模型）。

9.地址栏输入url发生了啥？
a. dns域名解析
b.建立tcp/ip连接
c.发送http请求
d.返回响应数据，前端渲染
e.关闭连接
10.
0.1 + 0.2 == 0.3？ 答案很明显，肯定不相等，float加法后面还有小数位，0.1 + 0.2结果为0.30000000000000004