記大四以來的前端面試

前言

大三下學期由於眼睛患了過敏性結膜炎，只好在家養病，錯過了寶貴的實習時間。大四到校就開始了緊張的秋招。拿到的第一個offer是一家廈門的公司，當時跟技術小哥談的很愉快，後來由於廈門比較遠，並且公司的業務我不太感興趣，因此沒有去。以後又面了不少家公司，一直持續到來年四月，由於技術太菜，投的大公司都進了人才庫（笑，最後進了一家還不錯的小公司，公司先後端分離，用react技術棧。在此紀錄一下大四以來的前端面試。

面試準備

1. 準備簡歷。參照了很多優秀的簡歷後（主要是知乎，和用搜索引擎搜索到的），寫好了本身的簡歷。
2. 刷面經。主要是牛客網，牛客網秋招和春招都有面經分享活動，不少拿到大廠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批評了...若是想作技術的話，仍是要有去大公司工做的想法。

怎麼看待加班？

爲了趕項目進度能夠接受（進去公司後問同事，同事說咱們公司加班很少...）

你有什麼想問個人？

前端部門技術棧，主要有哪些業務、實習期多久