第 1 題：(滴滴、餓了么)寫 React / Vue 項目時為什么要在列表組件中寫 key，其作用是什么？

1. 更準確

因為帶key就不是就地復用了，在sameNode函數 a.key === b.key對比中可以避免就地復用的情況。所以會更加準確。

2. 更快

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

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

第 2 題：['1', '2', '3'].map(parseInt) what & why ?

首先讓我們回顧一下，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 題：(挖財)什么是防抖和節流？有什么區別？如何實現？

防抖

觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間

思路

每次觸發事件時都取消之前的延時調用方法

節流

高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函數的執行頻率

思路

每次觸發事件時都判斷當前是否有等待執行的延時函數

第 4 題：介紹下 Set、Map、WeakSet 和 WeakMap 的區別？

Set

成員唯一、無序且不重復

[value, value]，鍵值與鍵名是一致的(或者說只有鍵值，沒有鍵名)

可以遍歷，方法有：add、delete、has

WeakSet

成員都是對象

成員都是弱引用，可以被垃圾回收機制回收，可以用來保存DOM節點，不容易造成內存泄漏

不能遍歷，方法有add、delete、has

Map

本質上是鍵值對的集合，類似集合

可以遍歷，方法很多可以跟各種數據格式轉換

WeakMap

只接受對象作為鍵名(null除外)，不接受其他類型的值作為鍵名

鍵名是弱引用，鍵值可以是任意的，鍵名所指向的對象可以被垃圾回收，此時鍵名是無效的

不能遍歷，方法有get、set、has、delete

第 5 題：介紹下深度優先遍歷和廣度優先遍歷，如何實現？

第 6 題：請分別用深度優先思想和廣度優先思想實現一個拷貝函數？

第 7 題：ES5/ES6 的繼承除了寫法以外還有什么區別？

先看ES5的繼承(原型鏈繼承)

ES6繼承

對比代碼可以知道，子類的繼承都是成功的，但是問題出在，子類的 __proto__ 指向不一樣。

ES5 的子類和父類一樣，都是先創建好，再實現繼承的，所以它們的指向都是 [Function] 。

ES6 則得到不一樣的結果，它指向父類，那么我們應該能推算出來，它的子類是通過 super 來改造的。

根據 es6--阮一峰 在class繼承里面的說法，是這樣子的：

引用阮一峰的 ECMAScript6入門 的class繼承篇

子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類自己的this對象，必須先通過父類的構造函數完成塑造，得到與父類同樣的實例屬性和方法，然后再對其進行加工，加上子類自己的實例屬性和方法。如果不調用super方法，子類就得不到this對象。

ES5 的繼承，實質是先創造子類的實例對象this，然后再將父類的方法添加到this上面(Parent.apply(this))。ES6 的繼承機制完全不同，實質是先將父類實例對象的屬性和方法，加到this上面(所以必須先調用super方法)，然后再用子類的構造函數修改this。

1、class 聲明會提升，但不會初始化賦值。Foo 進入暫時性死區，類似于 let、const 聲明變量。

2、class 聲明內部會啟用嚴格模式。

3、class 的所有方法(包括靜態方法和實例方法)都是不可枚舉的。

4、class 的所有方法(包括靜態方法和實例方法)都沒有原型對象 prototype，所以也沒有[[construct]]，不能使用 new 來調用。

5、必須使用 new 調用 class。

6、class 內部無法重寫類名

第 8 題：setTimeout、Promise、Async/Await 的區別

其中settimeout的回調函數放到宏任務隊列里，等到執行棧清空以后執行； promise.then里的回調函數會放到相應宏任務的微任務隊列里，等宏任務里面的同步代碼執行完再執行；async函數表示函數里面可能會有異步方法，await后面跟一個表達式，async方法執行時，遇到await會立即執行表達式，然后把表達式后面的代碼放到微任務隊列里，讓出執行棧讓同步代碼先執行。

第 9 題：(頭條、微醫)Async/Await 如何通過同步的方式實現異步

async await 用于把異步請求變為同步請求的方式,第一個請求的返回值作為后面一個請求的參數,其中每一個參數都是一個promise對象

例如：這種情況工作中會經常遇到

第 10 題：(頭條)異步筆試題

請寫出下面代碼的運行結果

第 11 - 20 題

第 11 題：(攜程)算法手寫題

已知如下數組：

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

編寫一個程序將數組扁平化去并除其中重復部分數據，最終得到一個升序且不重復的數組

第 12 題：(滴滴、挖財、微醫、海康)JS 異步解決方案的發展歷程以及優缺點。

1. 回調函數(callback)

缺點：回調地獄，不能用 try catch 捕獲錯誤，不能 return`

回調地獄的根本問題在于

缺乏順序性： 回調地獄導致的調試困難，和大腦的思維方式不符

嵌套函數存在耦合性，一旦有所改動，就會牽一發而動全身，即(控制反轉,嵌套函數過多的多話，很難處理錯誤

優點：解決了同步的問題(只要有一個任務耗時很長，后面的任務都必須排隊等著，會拖延整個程序的執行。)

2. Promise

Promise就是為了解決callback的問題而產生的。

Promise 實現了鏈式調用，也就是說每次 then 后返回的都是一個全新 Promise，如果我們在 then 中 return ，return 的結果會被Promise.resolve() 包裝

優點：解決了回調地獄的問題

缺點：無法取消 Promise ，錯誤需要通過回調函數來捕獲

3. Generator

特點：可以控制函數的執行，可以配合 co 函數庫使用

4. Async / await

async、await 是異步的終極解決方案

優點是：代碼清晰，不用像 Promise 寫一大堆 then 鏈，處理了回調地獄的問題

缺點：await 將異步代碼改造成同步代碼，如果多個異步操作沒有依賴性而使用 await 會導致性能上的降低。

第 13 題：(微醫)Promise 構造函數是同步執行還是異步執行，那么 then 方法呢？

執行結果是：1243

promise構造函數是同步執行的，then方法是異步執行的

第 14 題：(兌吧)情人節福利題，如何實現一個 new

先理清楚 new 關鍵字調用函數都的具體過程，那么寫出來就很清楚了

首先創建一個空的對象，空對象的 ___proto____屬性指向構造函數的原型對象

把上面創建的空對象賦值構造函數內部的this，用構造函數內部的方法修改空對象

如果構造函數返回一個非基本類型的值，則返回這個值，否則上面創建的對象

第 15 題：(網易)簡單講解一下http2的多路復用

第 16 題：談談你對TCP三次握手和四次揮手的理解

第 17 題：A、B 機器正常連接后，B 機器突然重啟，問 A 此時處于 TCP 什么狀態

如果A 與 B 建立了正常連接后，從未相互發過數據，這個時候 B 突然機器重啟，問 A 此時處于 TCP 什么狀態？如何消除服務器程序中的這個狀態？(超綱題，了解即可)

第 18 題：(微醫)React 中 setState 什么時候是同步的，什么時候是異步的？

第 19 題：React setState 筆試題，下面的代碼輸出什么？

第 20 題：介紹下 npm 模塊安裝機制，為什么輸入 npm install 就可以自動安裝對應的模塊？

83人點贊

總結

以上是生活随笔為你收集整理的react 面试题 高级_高级前端面试题目大全(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。