壹 ❀ 引
離職前唯唯諾諾害怕沒面試機會，擔心找不到工作，只是沒想到離職后，簡歷沒投遞，被各獵頭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的基本用法都介紹了一遍，返回什么，是否修改原數組。
面：對象API有了解嗎？
這里我首先想到的就是常用的keys方法，用於遍歷對象可枚舉屬性；create用於創建指定原型的新對象；getPrototypeOf用於獲取對象原型；definedProperty用於自定義對象是否可枚舉，是否可寫等屬性。assign用於復制多個源對象屬性到目標對象等；其它一時半會也沒想起來，大家執行查閱文檔。
面：能說下你理解的作用域和作用域鏈嗎？
作用域是變量和函數的作用域范圍與生命周期，當在當前作用域查找某變量時，如果沒找到就會去上層作用域找，此行為可以一直找到全局對象window（非嚴格模式），而這個查找過程也就是所謂的作用域鏈。
說完后，我說要不把原型和原型鏈也一起介紹了吧，面試官笑起來了，說可以啊。
面：介紹下原型和原型鏈？
這里我從萬物接對象，引出了包裝對象，說到函數是一等公民，說到原型鏈的頂端null，然后反向倒推，介紹了比較特殊的構造器Function，因為這個家伙的原型是一個匿名函數而不是一個普通對象。關於原型可以閱讀博主這兩篇文章，能把第二篇文章的圖理解透，基本沒問題。
JS 疫情宅在家，學習不能停，七千字長文助你徹底弄懂原型與原型鏈
JS 究竟是先有雞還是有蛋，Object與Function究竟誰出現的更早
面：能說說你對於閉包的理解嗎？
閉包說到底，就是能使用外層函數作用域自由變量的函數，注意，它其實就是一個自帶了執行環境的函數，所以即便外層函數銷毀，由於閉包的依賴，自由變量也一直無法被釋放，這也容易導致內存泄漏，所以使用閉包一定在不需要的時候手動釋放自由變量，緊接着我說了下閉包的用途，比如節流防抖，模擬私有屬性，工廠函數等等，可以閱讀博主這篇文章：
一篇文章看懂JS閉包，都要2020年了，你怎么能還不懂閉包？
面：能說說深淺拷貝的區別與實現嗎？
深拷貝其實是針對引用對象類型來說的，要介紹深淺拷貝，得站在基本類型數據與引用類型數據存儲區別上去理解。事實上基本類型，比如數字，字符串，JavaScript都沒提供可以修改它們的方法，正因為不可變性，基本類型數據存放在棧中。
而對象就不一樣了，比如數組可以增加元素，對象也可以添加屬性，刪除屬性。對象大小不確定，所以我們聲明一個對象，對象的key因為是基本類型（不考慮map結構的情況），所以key會存在棧中，而值是對象，所以放在堆中。這就導致了一個問題，當我們拷貝一個對象時，其實拷貝的是指向堆中value的指針，這也導致其中一方修改了對象值，會影響另一個對象。
而對於對象的深拷貝實現，乞丐版，JSON的兩個方法，缺點是不能拷貝函數，undefined等。好一點可以遞歸層層遍歷拷貝，或者有其它三方拷貝。
面：ES6了解嗎？說說let const var區別？
這個就簡單了，var有遍歷提升，let和const不能反復聲明，存在暫時性死域，塊級作用域等等。唯一需要強調的一點是，當const聲明一個變量的值是對象時，這個對象其實是可修改的，不能改的是對象的引用地址。這里大家自行組織語言。
面：說說你對箭頭函數的理解
箭頭函數一般用於回調，需要注意的就是箭頭函數沒有自己的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，問我具體怎么做，但是細節我忘記了...可以閱讀這篇文章：
面：你剛說到了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請求頭包含哪些東西？
我大致說了可接受響應內容類型Accept，接受的響應語言Accept-Language，資源認證Authorization，是否緩存Cache-control。沒怎么復習，大家自行百度。
面：能說下ajax嗎？
因為太久沒用原生ajax了，我印象也有點模糊，大致說了創建xml對象，然后判斷state狀態，之后就是對應請求接口，做后續處理，這個大家自己查查資料。
面：flex了解嗎？說說常用屬性？
這里我分別對於容器屬性，項目屬性，幾個常用的說了說，具體可閱讀這篇文章：
面：我看你項目有組件封裝經驗？說說一個組件需求給你，你是怎么從零到有完成它的？
這里我就說了第一步大致確認需求，畫流程圖，以流程圖再次核實需求，若有與外界存在數據交互，確認數據結構以及對外API，這些基本工作做好，流程圖沒問題那就是寫代碼的事情了。
面：那你挑一個你覺得滿意的組件，講講你怎么做的。
這里挑了之前做的地址管理組件，包括配置，支持兩種布局模式，以及做了本地數據更新處理，地址選擇判斷，參考了京東淘寶的模式，同時用筆畫了一個簡易的流程圖。
面：我看你項目用到了BEM規范，說說BEM代表什么意思，怎么連接？
B代表block，也就是塊，E代表元素，M代表同意元素的不同狀態。連接是這樣block-name__element-name--modifier-name。要用這個也是為了復用組件，確保組件樣式不會與外界樣式沖突，所以對於組件樣式采用了BEM規范。
面：發布工具有了解嗎？
由於我上家公司用的百度的fis3，所以我簡單說了下fis3，做了less編譯，css瀏覽器兼容前綴添加，文件合並等相關功能。
面：看你有寫博客，訪問量多少，產出呢？最近一篇博客是什么時候寫的？
訪問不知道，沒開這個功能，粉絲目前兩百多個，產出一個月最少八篇，精品文章一篇可能需要一周閑余時間。最近一篇博客就是昨天寫的。
你剛說了你在刷leetcode，最近做的一道題是什么，又把筆給我了，說說你的思路。
這個就如實回答了，因為也是剛做不久，就用筆在紙上大致寫了下實現思路。
后端語言有了解嗎？
目前沒有，等vue實戰了下一步就是學習node。
那么到這里，整個面試基本就結束， 問我有啥問題。我就問了下公司的技術選擇，未來可能涉及的項目類型，是否有移動端，因為我非常渴求快速向vue，react轉型，然后就是聊了下新職待遇，福利啥的。我最后問了下對於我的面試評價，面試官笑了笑，說等通知。我也笑了，說那肯定掛了，他說那倒未必。然后送我離開公司。
面完后我心里是給自己打了70分，本人口頭表達能力還可以，可能問題也不難，總體回答還行，結果剛上地鐵不就，HR電話就過來了，說技術面通過了，明天綜合面試，聊聊職業規划啥的，基本就宣布可以入職了
肆 ❀ 總
怎么說呢，這兩場面試下來，大致可以確定的是自己JavaScript基礎還可以，我之前一直沒自信，感覺這也學的不扎實，那也學的不好，這里得顧，那里也得顧，急起來了導致我vue學習非常緩慢。經過這兩輪面試，至少js部門我可以先放放，可以專心學習http與vue了，當然算法部分還得加強，不然問到算法稍微難一點我估計也懸。
由於之前的面試都是獵頭找的我，比較被動，后面還是主動挑一些自己感興趣的公司投遞看看，我也跟負責騰訊網易的HR交流，今年大廠簡歷卡的比較死，難度很高，深感自己沒戲，但願后面能找到一家還算心儀的公司，兩年后一定挑戰大廠，那么本文就到這里了。