作者 | 木易楊

第 1 題：（滴滴、餓了么）寫(xiě) React / Vue 項(xiàng)目時(shí)為什么要在列表組件中寫(xiě) 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 題：請(qǐng)分別用深度優(yōu)先思想和廣度優(yōu)先思想實(shí)現(xiàn)一個(gè)拷貝函數(shù)？

第 7 題：ES5/ES6 的繼承除了寫(xiě)法以外還有什么區(qū)別？

第 8 題：setTimeout、Promise、Async/Await 的區(qū)別

第 9 題：（頭條、微醫(yī)）Async/Await 如何通過(guò)同步的方式實(shí)現(xiàn)異步

第 10 題：（頭條）異步筆試題

請(qǐng)寫(xiě)出下面代碼的運(yùn)行結(jié)果：

第 11 題：（攜程）算法手寫(xiě)題

已知如下數(shù)組：

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

編寫(xiě)一個(gè)程序?qū)?shù)組扁平化去并除其中重復(fù)部分?jǐn)?shù)據(jù)，最終得到一個(gè)升序且不重復(fù)的數(shù)組

第 12 題：（滴滴、挖財(cái)、微醫(yī)、?？担㎎S 異步解決方案的發(fā)展歷程以及優(yōu)缺點(diǎn)。

第 13 題：（微醫(yī)）Promise 構(gòu)造函數(shù)是同步執(zhí)行還是異步執(zhí)行，那么 then 方法呢？

第 14 題：（兌吧）情人節(jié)福利題，如何實(shí)現(xiàn)一個(gè) new

第 15 題：（網(wǎng)易）簡(jiǎn)單講解一下http2的多路復(fù)用

第 16 題：談?wù)勀銓?duì)TCP三次握手和四次揮手的理解

第 17 題：A、B 機(jī)器正常連接后，B 機(jī)器突然重啟，問(wèn) A 此時(shí)處于 TCP 什么狀態(tài)

如果A 與 B 建立了正常連接后，從未相互發(fā)過(guò)數(shù)據(jù)，這個(gè)時(shí)候 B 突然機(jī)器重啟，問(wèn) A 此時(shí)處于 TCP 什么狀態(tài)？如何消除服務(wù)器程序中的這個(gè)狀態(tài)？（超綱題，了解即可）

第 18 題：（微醫(yī)）React 中 setState 什么時(shí)候是同步的，什么時(shí)候是異步的？

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

第 20 題：介紹下 npm 模塊安裝機(jī)制，為什么輸入 npm install 就可以自動(dòng)安裝對(duì)應(yīng)的模塊？

第 21 題：有以下 3 個(gè)判斷數(shù)組的方法，請(qǐng)分別介紹它們之間的區(qū)別和優(yōu)劣

Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

第 22 題：介紹下重繪和回流（Repaint & Reflow），以及如何進(jìn)行優(yōu)化

第 23 題：介紹下觀察者模式和訂閱-發(fā)布模式的區(qū)別，各自適用于什么場(chǎng)景

第 24 題：聊聊 Redux 和 Vuex 的設(shè)計(jì)思想

第 25 題：說(shuō)說(shuō)瀏覽器和 Node 事件循環(huán)的區(qū)別

第 26 題：介紹模塊化發(fā)展歷程。

可從IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、<script type='module'> 這幾個(gè)角度考慮。

第 27 題：全局作用域中，用 const 和 let 聲明的變量不在 window 上，那到底在哪里？如何去獲取？。

第 28 題：cookie 和 token 都存放在 header 中，為什么不會(huì)劫持 token？

第 29 題：聊聊 Vue 的雙向數(shù)據(jù)綁定，Model 如何改變 View，View 又是如何改變 Model 的。

第 30 題：兩個(gè)數(shù)組合并成一個(gè)數(shù)組

請(qǐng)把兩個(gè)數(shù)組 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D']，合并為 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。

第 31 題：改造下面的代碼，使之輸出0 - 9，寫(xiě)出你能想到的所有解法。

第 32 題：Virtual DOM 真的比操作原生 DOM 快嗎？談?wù)勀愕南敕ā?/h3>

第 33 題：下面的代碼打印什么內(nèi)容，為什么？

第 34 題：簡(jiǎn)單改造下面的代碼，使之分別打印 10 和 20

第 35 題：瀏覽器緩存讀取規(guī)則

可以分成 Service Worker、Memory Cache、Disk Cache 和 Push Cache，那請(qǐng)求的時(shí)候 from memory cache 和 from disk cache 的依據(jù)是什么，哪些數(shù)據(jù)什么時(shí)候存放在 Memory Cache 和 Disk Cache中？

第 36 題：使用迭代的方式實(shí)現(xiàn) flatten 函數(shù)。

第 37 題：為什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做異步操作？

第 38 題：（京東）下面代碼中 a 在什么情況下會(huì)打印 1？

第 39 題：介紹下 BFC 及其應(yīng)用。

第 40 題：在 Vue 中，子組件為何不可以修改父組件傳遞的 Prop

如果修改了，Vue 是如何監(jiān)控到屬性的修改并給出警告的。

第 41 題：下面代碼輸出什么

第 42 題：（喜馬拉雅）實(shí)現(xiàn)一個(gè) sleep 函數(shù)

比如 sleep(1000) 意味著等待1000毫秒，可從 Promise、Generator、Async/Await 等角度實(shí)現(xiàn)

第 43 題：使用 sort() 對(duì)數(shù)組 [3, 15, 8, 29, 102, 22] 進(jìn)行排序，輸出結(jié)果

第 44 題：介紹 HTTPS 握手過(guò)程

第 45 題：HTTPS 握手過(guò)程中，客戶(hù)端如何驗(yàn)證證書(shū)的合法性

第 46 題：輸出以下代碼執(zhí)行的結(jié)果并解釋為什么

第 47 題：雙向綁定和 Vuex 是否沖突

第 48 題：call 和 apply 的區(qū)別是什么，哪個(gè)性能更好一些

第 49 題：為什么通常在發(fā)送數(shù)據(jù)埋點(diǎn)請(qǐng)求的時(shí)候使用的是 1x1 像素的透明 gif 圖片？

第 50 題：（百度）實(shí)現(xiàn) (5).add(3).minus(2) 功能。

例：5 + 3 - 2，結(jié)果為 6

第 51 題：Vue 的響應(yīng)式原理中 Object.defineProperty 有什么缺陷？

為什么在 Vue3.0 采用了 Proxy，拋棄了 Object.defineProperty？

第 52 題：怎么讓一個(gè) div 水平垂直居中

第 53 題：輸出以下代碼的執(zhí)行結(jié)果并解釋為什么

第 54 題：冒泡排序如何實(shí)現(xiàn)，時(shí)間復(fù)雜度是多少， 還可以如何改進(jìn)？

第 55 題：某公司 1 到 12 月份的銷(xiāo)售額存在一個(gè)對(duì)象里面

如下：{1:222, 2:123, 5:888}，請(qǐng)把數(shù)據(jù)處理為如下結(jié)構(gòu)：[222, 123, null, null, 888, null, null, null, null, null, null, null]。

第 56 題：要求設(shè)計(jì) LazyMan 類(lèi)，實(shí)現(xiàn)以下功能。

第 57 題：分析比較 opacity: 0、visibility: hidden、display: none 優(yōu)劣和適用場(chǎng)景。

第 58 題：箭頭函數(shù)與普通函數(shù)（function）的區(qū)別是什么？構(gòu)造函數(shù)（function）可以使用 new 生成實(shí)例，那么箭頭函數(shù)可以嗎？為什么？

第 59 題：給定兩個(gè)數(shù)組，寫(xiě)一個(gè)方法來(lái)計(jì)算它們的交集。

例如：給定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。

第 60 題：已知如下代碼，如何修改才能讓圖片寬度為 300px ？注意下面代碼不可修改。

<img src='1.jpg' style='width:480px!important;”>

第 61 題：介紹下如何實(shí)現(xiàn) token 加密

第 62 題：redux 為什么要把 reducer 設(shè)計(jì)成純函數(shù)

第 63 題：如何設(shè)計(jì)實(shí)現(xiàn)無(wú)縫輪播

第 64 題：模擬實(shí)現(xiàn)一個(gè) Promise.finally

第 65 題：`a.b.c.d` 和 `a['b']['c']['d']`，哪個(gè)性能更高？

第 66 題：ES6 代碼轉(zhuǎn)成 ES5 代碼的實(shí)現(xiàn)思路是什么

第 67 題：數(shù)組編程題

隨機(jī)生成一個(gè)長(zhǎng)度為 10 的整數(shù)類(lèi)型的數(shù)組，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20]，將其排列成一個(gè)新數(shù)組，要求新數(shù)組形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]]。

第 68 題：如何解決移動(dòng)端 Retina 屏 1px 像素問(wèn)題

第 69 題：如何把一個(gè)字符串的大小寫(xiě)取反（大寫(xiě)變小寫(xiě)小寫(xiě)變大寫(xiě)），例如 ’AbC' 變成 'aBc' 。

第 70 題：介紹下 webpack 熱更新原理，是如何做到在不刷新瀏覽器的前提下更新頁(yè)面的。

第 71 題：實(shí)現(xiàn)一個(gè)字符串匹配算法，從長(zhǎng)度為 n 的字符串 S 中，查找是否存在字符串 T，T 的長(zhǎng)度是 m，若存在返回所在位置。

第 72 題：為什么普通 `for` 循環(huán)的性能遠(yuǎn)遠(yuǎn)高于 `forEach` 的性能，請(qǐng)解釋其中的原因。

第 73 題：介紹下 BFC、IFC、GFC 和 FFC

第 74 題：使用 JavaScript Proxy 實(shí)現(xiàn)簡(jiǎn)單的數(shù)據(jù)綁定

第 75 題：數(shù)組里面有10萬(wàn)個(gè)數(shù)據(jù)，取第一個(gè)元素和第10萬(wàn)個(gè)元素的時(shí)間相差多少

第 76 題：輸出以下代碼運(yùn)行結(jié)果

第 77 題：算法題「旋轉(zhuǎn)數(shù)組」

給定一個(gè)數(shù)組，將數(shù)組中的元素向右移動(dòng) k 個(gè)位置，其中 k 是非負(fù)數(shù)。

第 78 題：Vue 的父組件和子組件生命周期鉤子執(zhí)行順序是什么？

第 79 題：input 搜索如何防抖，如何處理中文輸入？

第 80 題：介紹下 Promise.all 使用、原理實(shí)現(xiàn)及錯(cuò)誤處理？

第 81 題：打印出 1 - 10000 之間的所有對(duì)稱(chēng)數(shù)

例如：121、1331 等

第 82 題：周一算法題之「移動(dòng)零」

給定一個(gè)數(shù)組 nums，編寫(xiě)一個(gè)函數(shù)將所有 0 移動(dòng)到數(shù)組的末尾，同時(shí)保持非零元素的相對(duì)順序。

示例:

說(shuō)明:

1. 必須在原數(shù)組上操作，不能拷貝額外的數(shù)組。

2. 盡量減少操作次數(shù)。

第 83 題：var、let 和 const 區(qū)別的實(shí)現(xiàn)原理是什么

第 84 題：請(qǐng)實(shí)現(xiàn)一個(gè) add 函數(shù)，滿(mǎn)足以下功能。

第 85 題：react-router 里的 <Link> 標(biāo)簽和 <a> 標(biāo)簽有什么區(qū)別

如何禁掉 <a> 標(biāo)簽?zāi)J(rèn)事件，禁掉之后如何實(shí)現(xiàn)跳轉(zhuǎn)。

第 86 題：（京東、快手）周一算法題之「兩數(shù)之和」

給定一個(gè)整數(shù)數(shù)組和一個(gè)目標(biāo)值，找出數(shù)組中和為目標(biāo)值的兩個(gè)數(shù)。

你可以假設(shè)每個(gè)輸入只對(duì)應(yīng)一種答案，且同樣的元素不能被重復(fù)利用。

示例：

第 87 題：在輸入框中如何判斷輸入的是一個(gè)正確的網(wǎng)址。

第 88 題：實(shí)現(xiàn) convert 方法，把原始 list 轉(zhuǎn)換成樹(shù)形結(jié)構(gòu)，要求盡可能降低時(shí)間復(fù)雜度

以下數(shù)據(jù)結(jié)構(gòu)中，id 代表部門(mén)編號(hào)，name 是部門(mén)名稱(chēng)，parentId 是父部門(mén)編號(hào)，為 0 代表一級(jí)部門(mén)，現(xiàn)在要求實(shí)現(xiàn)一個(gè) convert 方法，把原始 list 轉(zhuǎn)換成樹(shù)形結(jié)構(gòu)，parentId 為多少就掛載在該 id 的屬性 children 數(shù)組下，結(jié)構(gòu)如下：

第 89 題：設(shè)計(jì)并實(shí)現(xiàn) Promise.race()

第 90 題：實(shí)現(xiàn)模糊搜索結(jié)果的關(guān)鍵詞高亮顯示

第 91 題：介紹下 HTTPS 中間人攻擊

第 92 題：已知數(shù)據(jù)格式，實(shí)現(xiàn)一個(gè)函數(shù) fn 找出鏈條中所有的父級(jí) id：

第 93 題：給定兩個(gè)大小為 m 和 n 的有序數(shù)組 nums1 和 nums2。請(qǐng)找出這兩個(gè)有序數(shù)組的中位數(shù)。要求算法的時(shí)間復(fù)雜度為 O(log(m+n))。

示例 1：

中位數(shù)是 2.0

示例 2：

小白Python的學(xué)習(xí)規(guī)劃，我只做了5件事！

https://edu.csdn.net/topic/python115?utm_source=csdn_bw

中位數(shù)是(2 + 3) / 2 = 2.5

第 94 題：vue 在 v-for 時(shí)給每項(xiàng)元素綁定事件需要用事件代理嗎？為什么？

第 95 題：模擬實(shí)現(xiàn)一個(gè)深拷貝，并考慮對(duì)象相互引用以及 Symbol 拷貝的情況

第 96 題：介紹下前端加密的常見(jiàn)場(chǎng)景和方法

第 97 題：React 和 Vue 的 diff 時(shí)間復(fù)雜度從 O(n^3) 優(yōu)化到 O(n) ，那么 O(n^3) 和 O(n) 是如何計(jì)算出來(lái)的？

第 98 題：（京東）寫(xiě)出如下代碼的打印結(jié)果

第 99 題：（bilibili）編程算法題

用 JavaScript 寫(xiě)一個(gè)函數(shù)，輸入 int 型，返回整數(shù)逆序后的字符串。如：輸入整型 1234，返回字符串“4321”。要求必須使用遞歸函數(shù)調(diào)用，不能用全局變量，輸入函數(shù)必須只有一個(gè)參數(shù)傳入，必須返回字符串。

第 100 題：（京東）請(qǐng)寫(xiě)出如下代碼的打印結(jié)果

作者簡(jiǎn)介：木易楊，網(wǎng)易高級(jí)前端工程師，跟著我每周重點(diǎn)攻克一個(gè)前端面試重難點(diǎn)。讓我?guī)阕哌M(jìn)高級(jí)前端的世界，在進(jìn)階的路上，共勉！