2021前端面試題系列(210414)

目錄

• 第 1 題：寫 React / Vue 項目時爲何要在列表組件中寫 key，其做用是什麼？()
• 第 2 題：['1', '2', '3'].map(parseInt) what & why ?
• 第 3 題：什麼是防抖和節流？有什麼區別？如何實現？
  • 1.防抖
    • 思路：
  • 2.節流
    • 思路：

---

第 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));