2020高級前端面試題(學習筆記)

2020高級前端面試題（學習筆記）

參考文章：https://www.cnblogs.com/sexintercourse/p/12418512.html

 

一、寫React/Vue項目時為什么要在列表組件中寫key，其作用是什么？

1. 更准確。因為帶key就不是就地復用了

2. 更快。利用key的唯一性生成map對象來獲取對應節點，比遍歷方式更快。主要是為了提升diff【同級比較】的效率。自己想一下自己要實現前后列表的diff，如果對列表的每一項增加一個key，即唯一索引，那就可以很清楚的知道兩個列表誰少了誰沒變。而如果不加key的話，就只能一個個對比了，

vue和react都是采用diff算法來對比新舊虛擬節點，從而更新節點。在vue的diff函數中（建議先了解一下diff算法過程）。在交叉對比中，當新節點跟舊節點頭尾交叉對比沒有結果時，會根據新節點的key去對比糾結點數組中的key，從而找到相應舊節點（這里對應的是一個key => index的 map映射）。如果沒找到就認為是一個新增節點。而如果沒有key，那么就會采用遍歷查找的方式去找到對應的舊節點。一種是一個map映射，另一種是遍歷查找。相比而言，map映射的速度更快。

 

二、['1', '2', '3'].map(parseInt) what & why?

首先讓我們回顧一下，map函數的第一個參數callback

var new_array = arr.map(function(currentValue[, index[, array]])) {
    // Return element for new_array
}[, thisArg]

這個callback一共可以接收三個參數，其中第一個參數代表當前被處理的元素，而第二個參數代表該元素的索引。

而parseInt則是用來解析字符串的，使字符串成為指定基數的整數

parseInt(string, radix)

parseInt接收2個參數，第一個表示被處理的值（字符串），第二個表示為解析時的基數

了解這兩個函數后，我們可以模擬一下運行情況

parseInt('1', 0)

radix為0時，且string參數不以“0x”或“0”開頭時，按照10為基數處理。此時返回1

parseInt('2', 1)

radix為1，1進制表示的數中，最大值應小於2，所以無法解析，返回NaN

parseInt('3', 2)

radix為2，2進制表示的數中，最大值小於3，所以無法解析，返回NaN

map函數返回的是一個數組，所以最后結果為[1, NaN, NaN]

 

 

 

三、什么是防抖和節流？有什么區別？如何實現？

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;
        setTimeout(() => {
            fn.apply(this, arguments);
            canRun = true;
        }, 500);
    }
}

window.addEventListener('resize', throttle(sayHi));