前言
大三下學期因為眼睛患了過敏性結膜炎，只好在家養病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術小哥談的很愉快，後來因為廈門比較遠，而且公司的業務我不太感興趣，所以沒有去。之後又面了很多家公司，一直持續到來年四月，因為技術太菜，投的大公司都進了人才庫（笑，最後進了一家還不錯的小公司，公司前後端分離，用react技術棧。在此紀錄一下大四以來的前端面試。
面試準備
- 準備簡歷。參照了不少優秀的簡歷後（主要是知乎，和用搜尋引擎搜尋到的），寫好了自己的簡歷。
- 刷面經。主要是牛客網，牛客網秋招和春招都有面經分享活動，很多拿到大廠offer的大牛會在上面分享面試經驗。
技術面
1. 自我介紹
先是個人的基本資訊，xx大學xx專業大四學生，之後說了自己擅長的方面，用xx技術寫過某某專案，在xx公司實習，實習期間寫過xx，最後講了自己的興趣和職業規劃。
面試官一般會根據自我介紹問問題，自我介紹時說了自己用vue寫過某某專案，然後就被問了一堆vue相關的題…
2. 說一下vue的雙向資料繫結
基本原理是釋出訂閱模式和Object.defineProperty()劫持各個屬性的setter、getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。因為有看過這方面的部落格，對照部落格寫過一個簡易版的vue，所以簡單說了下具體實現過程
3. 說下你對vue生命週期的理解
vue的生命週期就是一個vue例項從建立到被銷燬的過程。說了一遍vue官方文件那張生命週期的圖。
4. 怎麼寫一個vue元件
主要是三個部分，模板、樣式和指令碼。講了各個部分需要考慮什麼，子父元件的通訊、根據具體的功能使用相應指令，順便舉了個例子、樣式style標籤可以使用css一些前處理器的語法，通過lang屬性定義等。註冊元件可以全域性註冊也可以區域性註冊。寫單檔案元件的話，需要安vue-loader，在webpack配置；用jsx的話模板寫在render函式裡，css檔案直接import引入，jsx檔案用babel-loader處理，還需要安幾個babel的外掛來支援，忘了那幾個外掛具體叫什麼…
5. 用過scss？在vue元件中怎麼用
style標籤中lang="scss"，安node-sass和sass-loader，webpack中做相應的配置。node-sass安裝比較坑，因為牆的原因，用國內網路直接npm install安不上，一般是給命令列設代理，或者直接用淘寶的cnpm來安。之後在vue單檔案元件的style標籤，lang設為scss，把處理scss檔案的loader加到配置裡。
6. scss怎麼寫一個函式
@mixin或@function，寫法和js的普通函式一樣，@mixin加函式名，如果有引數，可以寫引數，引數可以定義預設值，也可以使用rest引數，之後大括號，內部是函式語句，和普通css寫法一樣，只是可以使用scss內部控制命令，內建函式，變數等等，用@include來呼叫。@function定義的函式和普通js函式一樣，可以用@return返回值，和普通js函式呼叫方法一樣，呼叫後返回的就是@function內部用@return返回的值。
7. webapck打包出來的檔案看過嗎?
沒看過…
8. 你怎麼理解模組化？
前端不斷髮展，需要在前端處理的邏輯也越來越多，js檔案越來越龐大，這時候為了更好的維護和複用js程式碼，需要組織js檔案，根據特定功能將js檔案進行劃分，這就是模組化。模組化需要遵守統一的規範，服務端node.js用的是CommonJS，客戶端有基於require.js的AMD規範，基於sea.js的CMD規範，也可以用gulp、webpack等的打包工具來實現模組化，es6有原生的模組化支援，但現在的瀏覽器還不支援。
9. 用過require.js，原理知道嗎？
沒有仔細瞭解過…記得是動態建立script標籤去請求指令碼，通過監聽script的onload事件，來確定載入順序…
10. 講一下js的原型
每一個js物件都有[[prototype]]內部屬性，這個屬性對應的就是該物件的原型，在一些瀏覽器原型物件可以通過__proto__訪問，es6可以通過Object.getPrototypeOf()來訪問，原型鏈的終點是null，之前是Object.prototype
11. 介紹一下閉包？
js中閉包是指可以訪問另一個函式作用域變數的函式，一般是定義在外層函式中的內層函式。原理和js的變數解析機制有關，js解析變數會沿著作用域鏈層層向上查詢。每次呼叫一個函式時會建立相應的執行上下文，和作用鏈，作用鏈會賦值給內部屬性[[scope]]，這樣內層函式就可以拿到外層函式作用域的變數，即使外層函式的執行上下文已經被銷燬，比如呼叫外層函式，返回內層函式，也可以通過內層函式拿到外層函式作用域的變數。
12. js繼承怎麼實現？優缺點？
高程上介紹的很詳細，建構函式式，類式，組合式，寄生組合式，es6可以直接extends
13. arguments和陣列有什麼區別？怎麼把arguments變成陣列？
argument是物件，是Object的例項，不能呼叫陣列的方法。轉陣列可以[].slice.call(arguments)，es6直接Array.from(arguments)或通過陣列擴充套件運算子[...arguments]
14. call，apply，bind區別？
都定義在Function.prototype上，第一個引數是呼叫的函式內部this指向的物件，第二個及之後是要傳入的函式引數，call和bind以值的形式傳入，apply以陣列的形式傳入，call和apply返回撥用函式的返回值，bind返回一個繫結函式。通過呼叫符()呼叫時，繫結函式內部this值指向呼叫bind的第一個引數，前幾個引數繫結了呼叫bind時傳入的第二個及之後的引數；通過new呼叫時，會忽略bind繫結的this值，將原函式當成構造器，引數有效。
15. 實現一個bind方法
MDN文件上有bind的Polyfill，注意考慮new繫結函式的情況
16. new一個物件的過程
建立一個空物件，this指向這個空物件，繼承建構函式的原型，執行建構函式中的程式碼，返回this
17. es6有哪些新特性
let，const，原生的模組化支援，結構賦值、非同步的解決方法promise、generator、async函式等，一些語法糖，比如箭頭函式，class，物件方法屬性的簡寫等
18. 講一下let和const
let用來定義變數，const定義常量，塊級作用域、暫時性死區、相同作用域不能重複定義、全域性定義不會掛在window上，此外let作迴圈變數，每次迴圈都是一個新的變數，const必須在宣告時賦值，之後給const定義的變數重新賦值會報錯。
19. promise怎麼理解？
讓非同步操作邏輯更加清晰，解決了非同步操的作回撥巢狀問題。promise物件有三種狀態，pending、fulfilled和rejected，promise物件內部儲存一個需要執行一段時間的非同步操作，當非同步操作執行結束後可以呼叫resolve或reject方法，來改變promise物件的狀態，狀態一旦改變就不能再變。new 一個promise後可以通過then方法，指定resolved和rejected時的回撥函式。
20. 箭頭函式和普通函式區別
不能用作generator函式，內部this是定義時所在環境的this，不能通過new呼叫，內部沒有arguments物件
21. 講講ajax
與伺服器通訊的一種手段，主要用於非同步通訊，無需重新整理頁面就可以拿到服務端的資料，或向服務端傳送資料，通過xhr物件實現。
22. 如何跨域？
ajax跨域，jsonp、CORS，不同域頁面的通訊，document.domain和HTML5的postMessage
23. jsonp原理？
原理是script元素的src屬性不受同源策略限制。和服務端約好函式名，請求檔案的時候，服務端返回一段 JavaScript。這段 JavaScript是呼叫函式的語句， 呼叫了約好的函式，並且將資料當做引數傳入。函式在前端定義，處理完資料之後，remove掉script元素。
24. 瞭解哪些排序演算法
沒有學過演算法，自己也沒有看過相關的知識…大一時候學過冒泡和選擇排序，還知道有堆排序、快排和歸併排序
25. 陣列去重手寫
es5實現
function unique(arr){
var newArr = [];
for(var i in arr) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
return newArr;
}es6
function unique(arr) {
return [...new Set(arr)]
}26. 手寫二分查詢
當時沒寫出來…以前根本沒看過，後來網上查了下，原理很簡單。有序陣列，先比較中間元素，如果等於中間元素，則返回中間元素的索引，如果比中間元素大或小，則從右邊區間或左邊區間查詢，和開始一樣再比較中間元素，以此類推。
27. rem和em區別
rem是基於根元素font-size進行計算，em稍微複雜，元素font-size屬性是相對於父元素font-size計算，其他屬性相對於本元素font-size計算。
28. 說一下position定位
position屬性有五個值，預設值是static。相對定位relative是對於元素正常位置進行定位，偏移後原本的位置仍佔據空間，不會影響其他元素的位置，未脫離文件流。絕對定位會脫離文件流，相對於已定位的祖先元素進行定位。固定定位和絕對定位相似，但是是相對於視口的。還有一個新增值sticky，是固定定位和相對定位的混合，必須指定top、right、bottom、left、四個闕值之一，適口滾動到闕值前是相對定位，之後是固定定位，相容性不好
29. 怎麼實現垂直居中
單行文字直接設height等於line-height、絕對定位top: 50%;再向上移自身寬度的一半，如果不定寬用transfrom: translateX(-50%)，flex佈局、tabe-cell、還有一個比較hack的方法，子元素display: inline-block; vertical-align: middle;父元素的after偽元素，height: 100%，display: inline-block; vertical-align: middle; font-size: 0;
30. 如何清除浮動
主要是兩種，一種是觸發BFC，因為BFC內部元素和外部元素不會互相影響；一種是用clear屬性，常用
.clearfix::after {
content: "";
display: table;
clear: both;
}31. 談一下BFC?
全稱塊級格式化上下文，是一個獨立的佈局環境，它規定內部的塊級盒子如何佈局。BFC中的元素的佈局是不受外界的影響，在一個BFC中，塊盒與行盒都會垂直的沿著其父元素的邊框排列。主要用於清除浮動和避免margin摺疊。浮動元素，position非預設值或相對定位元素，display為table-cell或table-caption元素、overflow不為預設值元素都會觸發BFC。
32. 平時用什麼IDE
VScode，webStorm和sublime也用過，不介意嘗試新的編輯器
非技術面
有一家公司是群面，給了一個問題讓我們討論，一共十個人，十個職業，只能活八個，讓哪八個人活？
這家公司的一面，一面是hr面，只要討論的時候活躍一些，沒有標準答案，言之有理即可
你是怎麼學習前端的？
書籍、視訊、部落格、自己練習。如果想學習某方面的知識，會去看知乎上推薦的書，也會看豆瓣上的評論，剛開始學js的時候看過高程、語言精粹、你不知道的js上冊等等。視訊主要是慕課網，跟著慕課網上的視訊敲過很多demo。收藏了一些人的部落格，比如阮一峰老師、張鑫旭老師，有相關的知識點不懂，直接在他們的部落格上面查。自己練習的資源很多，慕課網上的一些小的專案，百度前端技術學院上的題目，github上的專案，都可以自己完善，擴充套件。
期望薪資
當時要的低了…所以期望薪資還是要高一點。高了的話，hr會說，我們公司能給的最高薪資是多少，問你能不能接受。
平時興趣愛好
看書、看動漫、看電影、跑步
看過哪些書？最近在看什麼動漫？
看書並沒有喜歡看特定作者或特定型別的書，都是看一本書，對某些方面感興趣又去看那些方面的書。比如看完《1984》後，因為《1984》有涉及一些哲學的內容，又去看了《蘇菲的世界》《西方哲學簡史》。對日本感興趣，看了《菊與刀》(當時正值二戰，作者態度很明顯)；對美國感興趣，看了林達的《歷史的憂慮》。也有追一些熱點，國內劉慈欣先生的《三體》和一本短中篇小說合集，二熊的兩本書《最好的我們》和《你好，舊時光》都看過，總之看的很亂很雜。
動漫剛看完EVA…一直有追one piece的漫畫，國內二叔的一人之下
有列計劃的習慣嗎？
有。記在哪裡？手機上。方便給我看一下嗎？看了之後hr說，你這並不是計劃，沒有截止日期…
平時壓力大的時候怎麼處理？
晚上的話會出去跑步，有時候壓力太大學不進去，會睡覺或者看看動漫，如果不行就運動，運動對我很有效
未來的職業規劃？
目前只是想精進前端技術，長遠的還沒想過
家離北京近，為什麼來杭州？
北京壓力太大，而且在北方呆久了，想來南方看看。
想不想去阿里之類的大公司？
沒有想過（是真的沒有想過…因為技術太渣，想去也進不去）然後被hr批評了…如果想做技術的話，還是要有去大公司工作的想法。
怎麼看待加班？
為了趕專案進度可以接受（進去公司後問同事，同事說我們公司加班不多…）
你有什麼想問我的？
前端部門技術棧，主要有哪些業務、實習期多久