目錄
第 1 題：寫 React / Vue 項目時為什么要在列表組件中寫 key，其作用是什么？()
其實這道題也遇到過很多次，但是每次的理解也只限於，diff高效來更新dom節點，來分辨不同的dom節點等，這次看到了個很有意思回答在這里，記錄一下。
回答如下：
第 2 題：['1', '2', '3'].map(parseInt) what & why ?
第一眼看到這個題目的時候，腦海跳出的答案是 [1, 2, 3]，但是真正的答案是[1, NaN, NaN]。
首先讓我們回顧一下，map函數的第一個參數callback：
var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
這個callback一共可以接收三個參數，其中第一個參數代表當前被處理的元素，而第二個參數代表該元素的索引。
而parseInt則是用來解析字符串的，使字符串成為指定基數的整數。
parseInt(string, radix)
接收兩個參數，第一個表示被處理的值（字符串），第二個表示為解析時的基數。
了解這兩個函數后，我們可以模擬一下運行情況
parseInt('1', 0) //radix為0時，且string參數不以“0x”和“0”開頭時，按照10為基數處理。這個時候返回1
parseInt('2', 1) //基數為1（1進制）表示的數中，最大值小於2，所以無法解析，返回NaN
parseInt('3', 2) //基數為2（2進制）表示的數中，最大值小於3，所以無法解析，返回NaN
map函數返回的是一個數組，所以最后結果為[1, NaN, NaN]
第 3 題：什么是防抖和節流？有什么區別？如何實現？
1.防抖
觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。把多次事件的執行合並為一次來。
思路：
每次觸發事件時都取消之前的延時調用方法
function debounce(fn) {
let timeout = null; // 創建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
timeout = setTimeout(() => { // 然后又創建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內如果還有字符輸入的話，就不會執行 fn 函數
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
2.節流
高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率。就是降低函數的執行頻率。
思路：
每次觸發事件時都判斷當前是否有等待執行的延時函數
function throttle(fn) {
let canRun = true; // 通過閉包保存一個標記
return function () {
if (!canRun) return; // 在函數開頭判斷標記是否為true，不為true則return
canRun = false; // 立即設置為false
setTimeout(() => { // 將外部傳入的函數的執行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));