精選大廠前端面試高頻 100 題
引言
半年時(shí)間，幾千人參與，精選大廠前端面試高頻 100 題，這就是「壹題」。
在 2019 年 1 月 21 日這天，「壹題」項(xiàng)目正式開始，在這之后每個(gè)工作日都會(huì)出一道高頻面試題，主要涵蓋阿里、騰訊、頭條、百度、網(wǎng)易等大公司和常見題型。得益于大家熱情參與，現(xiàn)在每道題都有很多答案，提供的解題思路和答案也大大增長了我的見識，到現(xiàn)在已累積 100 道題目，『?8000+?』Star 了，可以說你面試中遇到過的題目，在這里肯定能發(fā)現(xiàn)熟悉的身影。
后期計(jì)劃除了持續(xù)更新「壹題」之外，還將整理非常詳細(xì)的答案解析，提供完整的思考鏈路，幫助大家更好的理解題目，以及題目背后的知識，「我們的目標(biāo)不是背題，而是通過題目查漏補(bǔ)缺，溫故知新」，歡迎大家加群討論。
更多更全更詳細(xì)的每日一題和答案解析，戳這里查看:?https://github.com/Advanced-Frontend/Daily-Interview-Question（以下每一題的解析，這個(gè)鏈接中都有，點(diǎn)擊「閱讀原文」學(xué)習(xí)吧）
第 1 - 10 題
第 1 題：（滴滴、餓了么）寫 React / Vue 項(xiàng)目時(shí)為什么要在列表組件中寫 key，其作用是什么？
第 2 題：`['1', '2', '3'].map(parseInt)` what & why ?
第 3 題：（挖財(cái)）什么是防抖和節(jié)流？有什么區(qū)別？如何實(shí)現(xiàn)？
第 4 題：介紹下 Set、Map、WeakSet 和 WeakMap 的區(qū)別？
第 5 題：介紹下深度優(yōu)先遍歷和廣度優(yōu)先遍歷，如何實(shí)現(xiàn)？
第 6 題：請分別用深度優(yōu)先思想和廣度優(yōu)先思想實(shí)現(xiàn)一個(gè)拷貝函數(shù)？
第 7 題：ES5/ES6 的繼承除了寫法以外還有什么區(qū)別？
第 8 題：setTimeout、Promise、Async/Await 的區(qū)別
第 9 題：（頭條、微醫(yī)）Async/Await 如何通過同步的方式實(shí)現(xiàn)異步
第 10 題：（頭條）異步筆試題
請寫出下面代碼的運(yùn)行結(jié)果
async?function?async1()?{
????console.log('async1?start');
????await?async2();
????console.log('async1?end');
}
async?function?async2()?{
????console.log('async2');
}
console.log('script?start');
setTimeout(function()?{
????console.log('setTimeout');
},?0)
async1();
new?Promise(function(resolve)?{
????console.log('promise1');
????resolve();
}).then(function()?{
????console.log('promise2');
});
console.log('script?end');第 11 - 20 題
第 11 題：（攜程）算法手寫題
已知如下數(shù)組：
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
編寫一個(gè)程序?qū)?shù)組扁平化去并除其中重復(fù)部分?jǐn)?shù)據(jù)，最終得到一個(gè)升序且不重復(fù)的數(shù)組
第 12 題：（滴滴、挖財(cái)、微醫(yī)、海康）JS 異步解決方案的發(fā)展歷程以及優(yōu)缺點(diǎn)。
第 13 題：（微醫(yī)）Promise 構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么 then 方法呢？
第 14 題：（兌吧）情人節(jié)福利題，如何實(shí)現(xiàn)一個(gè) new
第 15 題：（網(wǎng)易）簡單講解一下http2的多路復(fù)用
第 16 題：談?wù)勀銓CP三次握手和四次揮手的理解
第 17 題：A、B 機(jī)器正常連接后，B 機(jī)器突然重啟，問 A 此時(shí)處于 TCP 什么狀態(tài)
如果A 與 B 建立了正常連接后，從未相互發(fā)過數(shù)據(jù)，這個(gè)時(shí)候 B 突然機(jī)器重啟，問 A 此時(shí)處于 TCP 什么狀態(tài)？如何消除服務(wù)器程序中的這個(gè)狀態(tài)？（超綱題，了解即可）
第 18 題：（微醫(yī)）React 中 setState 什么時(shí)候是同步的，什么時(shí)候是異步的？
第 19 題：React setState 筆試題，下面的代碼輸出什么？
class?Example?extends?React.Component?{
??constructor()?{
????super();
????this.state?=?{
??????val:?0
????};
??}
??componentDidMount()?{
????this.setState({val:?this.state.val?+?1});
????console.log(this.state.val);????//?第?1?次?log
????this.setState({val:?this.state.val?+?1});
????console.log(this.state.val);????//?第?2?次?log
????setTimeout(()?=>?{
??????this.setState({val:?this.state.val?+?1});
??????console.log(this.state.val);??//?第?3?次?log
??????this.setState({val:?this.state.val?+?1});
??????console.log(this.state.val);??//?第?4?次?log
????},?0);
??}
??render()?{
????return?null;
??}
};
第 20 題：介紹下 npm 模塊安裝機(jī)制，為什么輸入 npm install 就可以自動(dòng)安裝對應(yīng)的模塊？
第 21 - 30 題
第 21 題：有以下 3 個(gè)判斷數(shù)組的方法，請分別介紹它們之間的區(qū)別和優(yōu)劣
Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()
第 22 題：介紹下重繪和回流（Repaint & Reflow），以及如何進(jìn)行優(yōu)化
第 23 題：介紹下觀察者模式和訂閱-發(fā)布模式的區(qū)別，各自適用于什么場景
第 24 題：聊聊 Redux 和 Vuex 的設(shè)計(jì)思想
第 25 題：說說瀏覽器和 Node 事件循環(huán)的區(qū)別
第 26 題：介紹模塊化發(fā)展歷程
可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、