2020年2月9日面试汇总

1、css盒模型解释：
盒模型分为标准盒模型和怪异盒模型

box-sizing: content-box    // 标准盒模型
box-sizing：border-box     // 怪异盒模型

标准盒模型：元素的宽度等于style里的width+margin+padding宽度

如下代码，整个宽高还是120px

div {
	box-sizing: content-box;
	margin: 10px;
	width: 100px;
	height: 100px;
	padding: 10px;
}

怪异盒模型：元素宽度等于style里的width宽度

如下代码，整个宽高还是100px

div {
	box-sizing: border-box;
	margin: 10px;
	width: 100px;
	height: 100px;
	padding: 10px;
}

注意：如果你在设计页面中，发现内容区被撑爆了，那么就先检查一下border-box是什么，最好在引用reset.css的时候，就对border-box进行统一设置，方便管理。

2、css选择器的权重问题：
!important > 行内样式 > #id > .class > 元素和伪元素 > * > 继承 > 默认

3、Less、sass、styus三者之间的区别
https://blog.csdn.net/Gorgio_Liu/article/details/103484696

4、如何去除数组中的重复元素
6种数组去重复的方法

<script>
	let arr = [0,2,2,2,3,4,5,3,3,5,4,'l','a','p','l','p','a'];

	// 第一种利用数组的indexOf()
	let arrs = [];
	for (let i=0; i<arr.length; i++) {
		if (arrs.indexOf(arr[i]) < 0) {
			arrs.push(arr[i])
		}
	}
	console.log(arrs)  // [0,2,3,4,5,'l','a','p']

	// 第二种利用filter()函数
	let arrf = arr.filter(function (ele, index, self) {
		// console.log(ele+'_'+index+'_'+self)
		return self.indexOf(ele) === index
	})
	console.log(arrf)  // [0,2,3,4,5,'l','a','p']

	// 第三种利用ES6的Set数据结构，Set类似数组，但里面的元素不重复
	let arry = [...new Set(arr)]
	console.log(arry) // [0,2,3,4,5,'l','a','p']

	// 第四种利用jQuery的inArray
	let jqarr = [];
	for(let i=0; i<arr.length; i++) {
		if($.inArray(arr[i].jqarr) == -1) {
			jqarr.push(arr[i])
		}
	}
	console.log(jqarr) // [0,2,3,4,5,'l','a','p']

	// 第五种数组ES6的includes
	let inarr = [];
	for (let s of arr) {
		if(!inarr.includes(s)) {
			inarr.push(s)
		} 
	}
	console.log(inarr) // [0,2,3,4,5,'l','a','p']

	// 第六种利用Array.from方法可以将Set结构转为数组。
	function dedupe(array) {
		return Array.from(new Set(array))
	}
	console.log(dedupe(arr))  // [0,2,3,4,5,'l','a','p']
</script>

5、ES6中普通函数和箭头函数的区别
（1）箭头函数的语法更加简洁、清晰
（2）箭头函数不会创建自己的this（深入理解）
箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。
箭头函数没有自己的this，它会捕获自己在定义时（注意：是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。
（3）箭头函数继承而来的this指向永远不变（深入理解）
（4）.call()/.apply()/.bind()无法改变箭头函数中this的指向
.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向，但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向，虽然这样做代码不会报错。
（5）箭头函数不能作为构造函数使用
构造函数的new都做了些什么？

1. JS内部首先会生成一个对象
2. 再把函数中的this指向该对象
3. 然后执行构造函数中的语句
4. 最终返回该对象实例

但是！！因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！
（6）箭头函数没有自己的arguments
箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。
可以在箭头函数中使用rest参数代替arguments对象，来访问箭头函数的参数列表！
（7）箭头函数没有原型prototype
（8）箭头函数不能作为Generator函数，不能使用yeild关键字

6、vue生命周期

1. 什么是Vue生命周期？
   Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom → 渲染、更新 →渲染、卸载等一系列过程，我们称这是Vue的生命周期
2. Vue生命周期的作用是什么？
   它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成良好的逻辑
3. Vue生命周期总共有几个阶段？
   它可以总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后
4. 第一次页面加载会触发哪几个钩子？
   第一次页面加载会触发beforeCreate，created，beforeMount，mounted这几个钩子
5. DOM渲染在哪个周期中就已经完成？
   DOM渲染在mounted中就已经完成了
6. 每个生命周期适合哪些场景？
   生命周期钩子的一些使用方法：
   beforecreate：可以在这加个loading事件，在加载实例时触发
   created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
   mounted：挂载元素，获取到DOM节点
   updated：如果对数据统一处理，在这里写上相应函数
   beforeDestroy：可以做一个确认停止事件的确认框
   nextTick：更新数据后立即操作dom