前端開發面試快速覆盤，不標準的面試經驗分享

壹 ❀ 引

離職前惟惟諾諾懼怕沒面試機會，擔憂找不到工做，只是沒想到離職後，簡歷沒投遞，被各獵頭HR電話給打爆了（外包居多）。由於目前還未系統複習，也以爲本身缺乏面試經驗，抱着白給的經驗不要白不要的態度，上週五，本週一面了2家，大體覆盤面試問到的問題，注意，本篇文章不是專業的面試題答案分享，因此一些問題仍是須要你們自行考證，那麼本文開始。

貳 ❀ 平安某外包

前面說了，大量面試中基本屬平安，華爲，oppo，vivo這四家外包居多，出於面試積累，無論是否是外包面一面也沒有壞處，因此分別預定了華爲和平安的兩個外包。

在面平安以前有個小插曲，我以前其實有跟他們HR溝通，若是面試請提早通知我，結果八點多我還在外面跑步，防不勝防華爲的電話過來了，一身汗思緒也沒辦法沉下來？簡單聊了兩句，我獲得的反饋是對方是但願招過去的人能馬上上手項目，對於我這種目前還在學習vue的人明顯不適合了，因此我直接放棄了，因此這個面試也不具有任何參考價值。

等到晚上十點，接到了平安外包的一面電話（二面由平安把關），雖然沒怎麼複習，內心也以爲沒底，仍是說那就簡單聊聊吧。

因爲我直說了vue沒有實戰項目經驗，因此面試官就以JavaScript基礎相關問題爲主，大體對話以下：

面：先作個自我介紹吧？

關於自我介紹，我其實預先打了草稿，主要是描述了三年裏，我在兩家公司扮演的角色，使用了哪些技術棧，作出了怎樣的貢獻，由於作簡歷都有工做經歷這個模塊，你們能夠將經歷作個彙總，這樣方便麪試官對於自身狀況有個初步瞭解。個人大體模板就是，你好，我叫XX，目前已有三年開發經驗，個人工做經歷大體可分爲兩段。前一年我在XX公司負責XX項目，使用的技術棧包括XXX，在項目開發中我負責了XX......你們能夠作個簡單參考。

面：由於你對於vue暫無開發經驗，我先問你一些JavaScript知識，能聊聊瀏覽器緩存嗎？有何區別？

問的就是localStorage和sessionStorage的區別，我簡單從使用和區別方面說了下，網站關於這個知識點介紹就不少了，這裏不作贅述。

面：能說說經常使用的數組API嗎？

我基本把push、pop、unshift、shift、splice、slice、map、reduce、concat、filter、some、forEach、find、findIndex等API的基本用法都介紹了一遍，返回什麼，是否修改原數組。

面：ES6新增的數組API有了解嗎？

這裏我首先想到的就是經常使用的keys方法，用於遍歷對象可枚舉屬性；create用於建立指定原型的新對象；getPrototypeOf用於獲取對象原型；definedProperty用於自定義對象是否可枚舉，是否可寫等屬性。assign用於複製多個源對象屬性到目標對象等；其它一時半會也沒想起來，你們執行查閱文檔。

面：能說下你理解的做用域和做用域鏈嗎？

做用域是變量和函數的做用域範圍與生命週期，當在當前做用域查找某變量時，若是沒找到就會去上層做用域找，此行爲能夠一直找到全局對象window（非嚴格模式），而這個查找過程也就是所謂的做用域鏈。

說完後，我說要不把原型和原型鏈也一塊兒介紹了吧，面試官笑起來了，說能夠啊。

面：介紹下原型和原型鏈？

這裏我從萬物接對象，引出了包裝對象，說到函數是一等公民，說到做用域鏈的頂端null，而後反向倒推，介紹了比較特殊的構造器Function，由於這個傢伙的原型是一個匿名函數而不是一個普通對象。關於原型能夠閱讀博主這兩篇文章，能把第二篇文章的圖理解透，基本沒問題。

JS 疫情宅在家，學習不能停，七千字長文助你完全弄懂原型與原型鏈

JS 到底是先有雞仍是有蛋，Object與Function究竟誰出現的更早

面：能說說你對於閉包的理解嗎？

閉包說到底，就是能使用外層函數做用域自由變量的函數，注意，它其實就是一個自帶了執行環境的函數，因此即使外層函數銷燬，因爲閉包的依賴，自由變量也一直沒法被釋放，這也容易致使內存泄漏，因此使用閉包必定在不須要的時候手動釋放自由變量，緊接着我說了下閉包的用途，好比節流防抖，模擬私有屬性，工廠函數等等，能夠閱讀博主這篇文章：

一篇文章看懂JS閉包，都要2020年了，你怎麼能還不懂閉包？

面：能說說深淺拷貝的區別與實現嗎？

深拷貝實際上是針對引用對象類型來講的，要介紹深淺拷貝，得站在基本類型數據與引用類型數據存儲區別上去理解。事實上基本類型，好比數字，字符串，JavaScript都沒提供能夠修改它們的方法，正由於不可變性，基本類型數據存放在棧中。

而對象就不同了，好比數組能夠增長元素，對象也能夠添加屬性，刪除屬性。對象大小不肯定，因此咱們聲明一個對象，對象的key由於是基本類型（不考慮map結構的狀況），因此key會存在棧中，而值是對象，因此放在堆中。這就致使了一個問題，當咱們拷貝一個對象時，其實拷貝的是指向堆中value的指針，這也致使其中一方修改了對象值，會影響另外一個對象。

而對於對象的深拷貝實現，乞丐版，JSON的兩個方法，缺點是不能拷貝函數，undefined等。好一點能夠遞歸層層遍歷拷貝，或者有其它三方拷貝。

【JS】深拷貝與淺拷貝的區別，實現深拷貝的幾種方法

面：ES6瞭解嗎？說說let const var區別？

這個就簡單了，var有遍歷提高，let和const不能反覆聲明，存在暫時性死域，塊級做用域等等。惟一須要強調的一點是，當const聲明一個變量的值是對象時，這個對象實際上是可修改的，不能改的是對象的引用地址。這裏你們自行組織語言。

es6入門1-- let與var的區別詳解

面：說說你對箭頭函數的理解

箭頭函數通常用於回調，須要注意的就是箭頭函數沒有本身的this，它的this更像是一個變量，由外層做用域的this來決定，別人指向誰它就指向誰。咱們不能直接修改箭頭函數this指向，但能夠經過修改外層this達到間接修改this的目的。也正是由於這個特性，箭頭函數不能用於作構造函數。

面：你前面說目前正在學習vue，那我問點簡單的，說說經常使用的指令

綁定屬性v-bind；遍歷v-for；控制顯示隱藏v-if與v-show，順帶說了下二者的區別；綁定事件v-on；雙向綁定v-model等等。

面：你剛說到v-if與v-for，那你知道二者的優先級嗎？

v-for優先級更高，官方文檔特別說明不要將這二者一塊兒使用。

一面大體聊到這裏了，總結反饋來講，以爲我JavaScript基礎很是紮實。雖然vue不熟練，可是仍是想給我二面機會，因此就等二面了。結果，二面在週六！沒聽錯，週六！因此我把二面推掉了...

叄 ❀ 某上市公司

到了本週一，我面了第二家公司，沒有遠程面試，而是直接帶簡歷公司本部面試。面試過程就是直接拿着個人簡歷聊，隨機提問，我來回答，前先後後聊了一個多小時，大體總結了下，問了二十多個問題，比較考驗人的隨機應變吧，且聽我慢慢道來。

面：先作個自我介紹吧。

參照上方面試自我介紹思路。

面：我看你作的項目還挺多的，你以爲哪一個項目最有亮點？你作了什麼？

這裏我就挑了上家公司一個由我全權負責的項目，主要說了項目重構作的一些優化，這個因人而異吧，你們根據本身項目來，主要突出本身作的貢獻。

面：基本數據類型有哪些？

Undefined，Null，String，Number，Boolean，Symbol。說完以後我補充了一下引用數據類型，以及二者存放的位置區別，參照第一家面試回答。

面：既然你說到了引用對象，說下深拷貝，怎麼實現深拷貝？

參照第一家面試回答

面：我如今給你一個數組，數組元素都是基本類型，不用JSON，不許用for遍歷，你怎麼快速拷貝一份數組？

用ES6的拓展運算符，數組concat都是能夠的，由於你說了元素都是基本類型，那就能夠用這兩種作到。

面：能說說原型和原型鏈嗎？

參照第一家面試回答，只不過這裏我找面試官借了筆，直接在簡歷背面把原型鏈的圖給他畫出來了，看神情他比較滿意....

面：能聊聊this指向嗎？

這裏我從默認綁定，隱式this綁定，顯示this綁定（順帶介紹了call,apply與bind的區別），箭頭函數this綁定以及new 構造函數this綁定五個方面介紹了。具體能夠看博主這篇文章：

js 五種綁定完全弄懂this，默認綁定、隱式綁定、顯式綁定、new綁定、箭頭函數綁定詳解

面：那我如今調用一個函數，同時用了call與對象調用，this指向誰？

obj.fn.call(ob2);

五種綁定優先級爲，顯式綁定 > 隱式綁定 > 默認綁定，new綁定 > 隱式綁定 > 默認綁定。由於咱們不可能new一個函數的同時還用顯示綁定，因此顯示綁定與new沒有可比性。

面：數組經常使用API有哪些？

參照第一家公司的回答。

面：你剛說到了forEach，那你能說說用它的時候有哪些你以爲要注意的嗎？

這裏我直說了forEach的item其實具體代替了某個值，它不是一個變量，因此咱們有時候慣性思惟，會寫出以下代碼，這樣實際上是無效的。

let arr = [1,1,1];
// 將全部元素都改成2
arr.forEach(item=> { item = 2 });

//正確來寫其實仍是得經過數組訪問
arr.forEach((item,index,arr)=> { arr[index] = 2});

另外說了forEach不支持return，也就是沒法中途跳出循環。

面：那我如今使用forEach，想中途跳出循環怎麼作？

我說可使用try...catch，問我具體怎麼作，可是細節我忘記了...能夠閱讀這篇文章：

js forEach跳出循環

面：你剛說到了sort，那我給你一個常數數組，怎麼倒序排列？

我說用b-a不就行了，具體以下：

let arr = [2, 1, 4, 9];
arr.sort((a, b) => b - a);
console.log(arr);// [9,4,2,1]

面：你剛說到了reduce，我如今給你一個數組，你用reduce求和，讓我在紙上寫出來。

我直接寫了以下代碼：

let arr = [2, 1, 4, 9];
arr.reduce((acc, current) => acc + current);//16

面：我如今給你一個數組，要求返回全部爲真的元素。

這裏我理解的是隱式轉換，在if判斷中，空數組，空對象都會被轉爲真，因此個人想法是這樣：

let arr = [0, 1, true, {}, false, [], undefined];
arr.filter((item) => item); //[1,true,{},[]]

面：這段代碼輸出什麼？

[1.1, 2.2, '3'].map(parseInt);

輸出1，NaN，NaN，具體緣由能夠看博主這篇博客的第一題：

JS 20道概念雖老但也略有收穫的JS基礎題，快速作題，高效複習，不妨試試？

面：說說http1 1.1 2與https的區別？

因爲我還沒複習到這塊，我就直說了，硬傷，沒答上來。

面：強緩存和協商性緩存能說下嗎？

這裏也是沒複習，只是簡單介紹了二者的區別，具體能夠查看博主這篇文章：

http緩存詳解，http緩存推薦方案

面：http請求頭包含哪些東西？

我大體說了可接受響應內容類型Accept，接受的響應語言Accept-Language，資源認證Authorization，是否緩存Cache-control。沒怎麼複習，你們自行百度。

面：能說下ajax嗎？

由於過久沒用原生ajax了，我印象也有點模糊，大體說了建立xml對象，而後判斷state狀態，以後就是對應請求接口，作後續處理，這個你們本身查查資料。

面：flex瞭解嗎？說說經常使用屬性？

這裏我分別對於容器屬性，項目屬性，幾個經常使用的說了說，具體可閱讀這篇文章：

一篇文章弄懂flex佈局

面：我看你項目有組件封裝經驗？說說一個組件需求給你，你是怎麼從零到有完成它的？

這裏我就說了第一步大體確認需求，畫流程圖，以流程圖再次覈實需求，如有與外界存在數據交互，確認數據結構以及對外API，這些基本工做作好，流程圖沒問題那就是寫代碼的事情了。

面：那你挑一個你以爲滿意的組件，講講你怎麼作的。

這裏挑了以前作的地址管理組件，包括配置，支持兩種佈局模式，以及作了本地數據更新處理，地址選擇判斷，參考了京東淘寶的模式，同時用筆畫了一個簡易的流程圖。

面：我看你項目用到了BEM規範，說說BEM表明什麼意思，怎麼鏈接？

B表明block，也就是塊，E表明元素，M表明贊成元素的不一樣狀態。鏈接是這樣block-name__element-name--modifier-name。要用這個也是爲了複用組件，確保組件樣式不會與外界樣式衝突，因此對於組件樣式採用了BEM規範。

面：發佈工具備瞭解嗎？

因爲我上家公司用的百度的fis3，因此我簡單說了下fis3，作了less編譯，css瀏覽器兼容前綴添加，文件合併等相關功能。

面：看你有寫博客，訪問量多少，產出呢？最近一篇博客是何時寫的？

訪問不知道，沒開這個功能，粉絲目前兩百多個，產出一個月最少八篇，精品文章一篇可能須要一週閒餘時間。最近一篇博客就是昨天寫的。

你剛說了你在刷leetcode，最近作的一道題是什麼，又把筆給我了，說說你的思路。

這個就如實回答了，由於也是剛作不久，就說了下實現思路。

後端語言有了解嗎？

目前沒有，將來會學習node。

那麼到這裏，整個面試基本就結束， 問我有啥問題。我就問了下公司的技術選擇，將來可能涉及的項目類型，是否有移動端，由於我很是渴求快速向vue，react轉型，而後就是聊了下新職待遇，福利啥的。我最後問了下對於個人面試評價，面試官笑了笑，說等通知。我也笑了，說那確定掛了，他說那倒未必。而後送我離開公司。

面完後我內心是給本身打了70分，本人口頭表達能力還能夠，可能問題也不難，整體回答還行，結果剛上地鐵不就，HR電話就過來了，說技術面經過了，明天綜合面試，聊聊職業規劃啥的，基本就宣佈能夠入職了

肆 ❀ 總

怎麼說呢，這兩場面試下來，大體能夠肯定的是本身JavaScript基礎還能夠，我以前一直沒自信，感受這也學的不紮實，那也學的很差，這裏得顧，那裏也得顧，急起來了致使我vue學習很是緩慢。通過這兩輪面試，至少js部門我能夠先放放，能夠專心學習http與vue了，固然算法部分還得增強，否則問到算法稍微難一點我估計也懸。

因爲以前的面試都是獵頭找的我，比較被動，後面仍是主動挑一些本身感興趣的公司投遞看看，我也跟負責騰訊網易的HR交流，今年大廠簡歷卡的比較死，難度很高，深感本身沒戲，希望後面能找到一家還算心儀的公司，兩年後必定挑戰大廠，那麼本文就到這裏了。