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