前言
哈，看樣子年後跳槽還是大家比較關心的一件事情了，繼第一波面試題彙總的反響和評論，觀看和點讚的朋友們很多，我繼續將後續面試的一些內容寫出來，有很多面試題答案我自己寫的比較含糊，但是在面試的過程中是描述的表較多的。畢竟寫文字要寫出來太多了。我也只是寫了一個大概，如果對答案不太滿意的同學可以自行查詢標準答案哈。
對了，有很多朋友說面試題過於簡單都是基礎之類的，實際上我本身也就是一個初中級的水平，所以面試的公司職位和對應的薪資匹配的就是這類的問題，演算法題基本很少面試到。
薪資範圍: 11k-14k
技術能力：自身能力強和擴充套件性高的可以自己跟HR多談多要
面試建議：請勿態度高冷，聊天請等對方說完在回答，切勿抱怨和說上家公司的缺點
面試重點：JavaScript基礎需要掌握得好，即使有些框架的原理和區別說不上來也沒事
最後總結：本人還在面試中，如有貴公司在招聘初中級請聯絡我哈
面試題彙總
- 請描述一下 React 和 Vue的區別
這道題你如果熟知的話，從各個方面的不同點，原理，為什麼這樣實現來描述，起嗎聊個半個小時。後續就不會問你太多問題了。
1.設計思想
vue的官網中說它是一款漸進式框架，採用自底向上增量開發的設計。
react主張函數語言程式設計，所以推崇純元件，資料不可變，單向資料流，當然需要雙向的地方也可以手動實現，
比如藉助 onChange 和 setState 來實現一個雙向的資料流。
2.編寫語法
Vue推薦的做法是webpack+vue-loader的單檔案元件格式，vue保留了html、css、js分離的寫法
React的開發者可能知道，react是沒有模板的，直接就是一個渲染函式，它中間返回的就是一個虛擬DOM樹，
React推薦的做法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'。
3.構建工具
vue提供了CLI 腳手架，可以幫助你非常容易地構建專案。
React 在這方面也提供了 create-react-app，但是現在還存在一些侷限性，不能配置等等
4.資料繫結
vue是實現了雙向資料繫結的mvvm框架，當檢視改變更新模型層，當模型層改變更新檢視層。
在vue中，使用了雙向繫結技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。
(這裡我們可以繼續深入講解一下雙向資料繫結的原理，我之前的文章手寫Vue原始碼可參考)
react是單向資料流，react中屬性是不允許更改的，狀態是允許更改的。
react中元件不允許通過this.state這種方式直接更改元件的狀態。自身設定的狀態，可以通過setState來進行更改。
(注意：React中setState是非同步的，導致獲取dom可能拿的還是之前的內容，
所以我們需要在setState第二個引數（回撥函式）中獲取更新後的新的內容。)
【這裡如果你瞭解深入的話可以嘗試描述一下React中setState的非同步操作是怎麼實現的，Vue中的更新是通過微任務等】
5.diff演算法
vue中diff演算法實現流程：
1.在記憶體中構建虛擬dom樹
2.將記憶體中虛擬dom樹渲染成真實dom結構
3.資料改變的時候，將之前的虛擬dom樹結合新的資料生成新的虛擬dom樹
4.將此次生成好的虛擬dom樹和上一次的虛擬dom樹進行一次比對(diff演算法進行比對)，來更新只需要被替換的DOM，
而不是全部重繪。在Diff演算法中，只平層的比較前後兩棵DOM樹的節點，沒有進行深度的遍歷。
5.會將對比出來的差異進行重新渲染
react中diff演算法實現流程:
DOM結構發生改變-----直接解除安裝並重新create
DOM結構一樣-----不會解除安裝,但是會update變化的內容
所有同一層級的子節點.他們都可以通過key來區分-----同時遵循1.2兩點
(其實這個key的存在與否只會影響diff演算法的複雜度,換言之,你不加key的情況下,
diff演算法就會以暴力的方式去根據一二的策略更新,但是你加了key,diff演算法會引入一些另外的操作)
複製程式碼React會逐個對節點進行更新，轉換到目標節點。而最後插入新的節點，涉及到的DOM操作非常多。diff總共就是移動、刪除、增加三個操作，而如果給每個節點唯一的標識（key），那麼React優先採用移動的方式，能夠找到正確的位置去插入新的節點。
vue會跟蹤每一個元件的依賴關係，不需要重新渲染整個元件樹。而對於React而言,每當應用的狀態被改變時,全部元件都會重新渲染,所以react中會需要shouldComponentUpdate這個生命週期函式方法來進行控制。
以上內容來自於Vue 和 React 的優點分別是什麼？，大家說的越多理解的越深越好。我只說了其中的三點。
- 前端常用的資料請求格式有哪些？都有些什麼特點？
這個問題在http中已經回答了一部分了，這裡就在單獨詳細的描述一下使用場景
Get/Post/Delete/Patch/Put經常用的這五種，其他的就不說了
通常：
我們使用Get請求來獲取資料
我們使用Post請求來傳送資料
我們使用Put請求來更新資料
我們使用Delete請求來刪除資料
我們使用Patch請求用於對資源應用部分修改。
Get和Post的區別：
1.Get 請求能快取，Post 不能
2.Post 相對 Get 安全一點點，因為Get 請求都包含在 URL 裡，
（當然你想寫到 body 裡也是可以的），且會被瀏覽器儲存歷史紀錄。Post 不會，但是在抓包的情況下都是一樣的。
4.URL有長度限制，會影響 Get 請求，但是這個長度限制是瀏覽器規定的，不是 RFC 規定的
5.Post 支援更多的編碼型別且不對資料型別限制
複製程式碼- 二次封裝axios，描述一下你在專案中封裝axios的思路和想法
關於axios等封裝，我之前有一篇簡易封裝axios的文章，大家可以簡單參考。
通常來說，我們在二次封裝axios，一般會引入UI元件的一些Message和Loading元件用來做提示資訊。
1.通過獲取儲存在瀏覽器端，或者是vuex中的token資訊，判斷是否跳轉登入頁面
2.在獲取到token的情況下設定自定義請求頭部資訊
3.在響應事件中，根據返回的不同狀態碼，根據業務需求，使用switch判斷跳轉頁面還是發出提示資訊。
4.封裝請求和響應事件的返回結果，使用Promise封裝。
5.增加請求loading和提示資訊。
簡單版本大致如上，複雜版本需要根據業務進行對應的封裝。
複製程式碼- 請介紹一下this
其實大部分情況下可以用一句話來概括，this總是指向呼叫該函式的物件。
對於常規的函式來說，誰呼叫該函式，this就指向該呼叫者，全域性環境下呼叫函式執行，this指向window
對於箭頭函式的this總結如下：
箭頭函式不繫結this，箭頭函式中的this相當於普通變數。
箭頭函式的this尋值行為與普通變數相同，在作用域中逐級尋找。
箭頭函式的this無法通過bind，call，apply來直接修改（可以間接修改）。
改變作用域中this的指向可以改變箭頭函式的this。
描述this問題，這裡我們可以擴充套件說明如何去改變this指向，通過bind，call，apply，然後說說他們的區別，懂得多的話，
可以說說他們的實現原理，或者手寫bind，call，apply的實現。
複製程式碼- 請介紹一下節流函式和防抖函式，簡單實現節流函式和防抖函式
“節流”與“防抖”的本質： 這兩個東西都以閉包的形式存在。
它們通過對事件對應的回撥函式進行包裹、以自由變數的形式快取時間資訊，最後用 setTimeout 來控制事件的觸發頻率。
防抖函式：有這樣一個按鈕，他提供檢視你未來老婆的樣子，當你在一定時間內多次點選查詢時，他只會在你最後一次點選以後，
採取執行查詢操作。
節流函式：當你在玩LOL的時候，你在放出大招後的一段時間內，再次點選放大招是不啟作用的，因為有一個冷卻時間。
程式碼我就不寫在這裡了，簡易版本的很簡單，完整版封裝一般我們都使用lodash封裝好的。
複製程式碼- 請介紹一下Eventloop(事件迴圈)
搞懂 Event Loop，是理解 Vue 對 DOM 操作優化的第一步。
Micro-Task 與 Macro-Task
事件迴圈中的非同步佇列有兩種：macro（巨集任務）佇列和 micro（微任務）佇列。
常見的 macro-task 比如：
setTimeout、setInterval、 setImmediate、script（整體程式碼）、 I/O 操作、UI 渲染等。
常見的 micro-task 比如:
process.nextTick、Promise、MutationObserver 等。
大家也知道了當我們執行 JS 程式碼的時候其實就是往執行棧中放入函式，當遇到非同步的程式碼時，會被掛起並在需要執行的時候，
加入到 Task（有多種 Task） 佇列中。
一旦執行棧為空，Event Loop 就會從 Task 佇列中拿出需要執行的程式碼並放入執行棧中執行，
所以本質上來說 JS 中的非同步還是同步行為。
所以 Event Loop 執行順序如下所示：
首先執行同步程式碼，這屬於巨集任務
當執行完所有同步程式碼後，執行棧為空，查詢是否有非同步程式碼需要執行
執行所有微任務
當執行完所有微任務後，如有必要會渲染頁面
然後開始下一輪 Event Loop，執行巨集任務中的非同步程式碼，也就是 setTimeout 中的回撥函式
微任務包括 process.nextTick ，promise ，MutationObserver，其中 process.nextTick 為 Node 獨有。
巨集任務包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。
這裡很多人會有個誤區，認為微任務快於巨集任務，其實是錯誤的。
因為巨集任務中包括了 script ，瀏覽器會先執行一個巨集任務，接下來有非同步程式碼的話才會先執行微任務。
複製程式碼- 請用一個例子來形象的描述原型鏈
哈，這個問題我在沸點有發過一個形象的比喻，給面試官逗笑了。
每個門派都有一個祖師爺。
學徒在山上學藝，學成下山後謹記師門教導，施展一身武藝。
恰逢一日對敵，面對敵人的怪異武功，師門好像未曾教過破解之法，便高喊一聲祖師爺救我，
剎那間一道白光降於頭頂，祖師爺靈魂附體，一套精絕凌厲的拳法殺得敵人措手不及。
但敵人也極是難纏，恐怕非要那門傳說中從天而降的掌法才能制敵。
你心中暗自著急，催促著祖師爺趕快發招，這時只聽身內傳來了祖師的聲音：
“MD這破掌法當年偷懶沒學，我去把我師祖也叫來問問...”
每個門派(FunctionX)都有一個祖師爺(prototype)。
學徒(object)在山上學藝(= new FunctionX)，學成下山後謹記師門教導，
施展一身武藝(http://object.xxxobject.xxx)。
恰逢一日對敵，面對敵人的怪異武功，師門好像未曾教過破解之法(object物件沒有yyy方法)，
便高喊一聲祖師爺救我，剎那間一道白光降於頭頂，祖師爺(__proto__)靈魂附體，
一套精絕凌厲的拳法殺得敵人措手不及(繼續尋找原型中是否有yyy方法)。
但敵人也極是難纏，恐怕非要那門傳說中從天而降的掌法才能制敵。你心中暗自著急，
催促著祖師爺趕快發招，這時只聽身內傳來了祖師的聲音：
“MD這破掌法當年偷懶沒學，我去把我師祖也叫來問問...”（如果原型中沒有yyy方法，則繼續查詢原型的原型，是謂原型鏈）
複製程式碼- 請介紹一下回流（Reflow）與重繪（Repaint）
迴流：當我們對 DOM 的修改引發了 DOM 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時，
瀏覽器需要重新計算元素的幾何屬性（其他元素的幾何屬性和位置也會因此受到影響），
然後再將計算的結果繪製出來。這個過程就是迴流（也叫重排）。
重繪：當我們對 DOM 的修改導致了樣式的變化、卻並未影響其幾何屬性（比如修改了顏色或背景色）時，
瀏覽器不需重新計算元素的幾何屬性、直接為該元素繪製新的樣式（跳過了上圖所示的迴流環節）。這個過程叫做重繪。
由此我們可以看出，重繪不一定導致迴流，迴流一定會導致重繪。
硬要比較的話，迴流比重繪做的事情更多，帶來的開銷也更大。但這兩個說到底都是吃效能的，
所以都不是什麼善茬。我們在開發中，要從程式碼層面出發，儘可能把迴流和重繪的次數最小化。
複製程式碼- 請描述一下什麼是執行棧
可以把執行棧認為是一個儲存函式呼叫的棧結構，它遵從先進後出的原則。
當開始執行 JS 程式碼時，首先會執行一個 main 函式，然後執行我們的程式碼。根據先進後出的原則，後執行的函式會先彈出棧。
複製程式碼
尾聲
至此2020年我所面試的公司大部分面試題都包含了以上內容，至於一些程式碼圖解之類的問題我就沒有寫上去，太簡單了，相信大家都會。後續一些細枝末節的地方我會補充。
最後希望我所總結的面試內容能夠對你在2020年的面試中有所幫助。
❤️ 看完幫個忙
如果你覺得這篇內容對你挺有啟發，我想邀請你幫我個小忙：
-
點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
-
關注公眾號「番茄學前端」，我會定時更新和釋出前端相關資訊和專案案例經驗供你參考。
-
加個好友， 雖然幫不上你大忙，但是一些業務問題大家可以探討交流。
