記一次XX前端面試

連續普通拳發表於2018-05-19
前端面試

前因，沒有比摸魚有趣的事了

距離自己被外派(俗稱外包)出去，已經過了快五個月，工作的話，很閒。人啊，一定保持好的習慣，懶惰是會上癮，日常摸魚，懷疑人生，我是誰，我在哪，我要幹什麼。

中午吃飯的時候，收到了boss直聘的一條訊息，XX發來一個資訊，是一個前端職位，問我是否感興趣，講道理，我還是很詫異的，一是我BOSS直聘上的簡歷很久沒更新了，二是我的線上簡歷寫的一塌糊塗，連專案介紹都沒有，我猜應該是HR手點錯了，發錯訊息了。

思考了一會，想著試試吧，就點了感興趣，一天過去了，我看沒回，emmm，果然點錯了。結果後來又聯絡我，希望我把簡歷發給她，我一想，還有戲，晚上的時候草草寫了一份簡歷遞了過去。然後又一天過去了，接著又過去了一天，我想，差不多涼了。誰知道後來又聯絡了我，問我下週有沒有時間去面試，我靠，那天可是星期五啊，我啥都木有準備，面試不是直接翻船，而且下週這邊的專案還要上線，問星期五可以不？兩天過去了，我想，差不多涼了吧，後面又回了了，說可以，郵件已經發到我郵箱了。我掐指一算，還有四天，趕緊將自己的switch、3DSLL收了起來，開始準備面試，然後自己給自己出面試題。

過程

自己給自己出面試題是個艱難的過程，就像自己和自己下象棋一樣。花了好幾天做了個總結，將自己記錄過的難點和自己想理解的東西做了個總結。除了排序的話，其他都是自己寫的，整個過程也碰到些麻煩，改了很多次。我把這些放在了GitHub上，我用了我老婆的照片，各位別介意。這些問題，有的我給了詳細的解題過程，喜歡的話點個star吧。後期遇到一些有趣的東西我也會在上面更新的。

我會在最後分析一些問題的解題過程。

姿勢

面試過程

講道理，XX的大樓，感覺還不錯。來的有點早，在下面找了個奶茶店，一邊瘋狂喝水，一遍思考人生。然後到點了，就上去了，面試是在8樓，講道理，還是有點緊張的，畢竟一年沒準備過面試了，心裡還是很玄的。進去以後，和其他面試的小夥伴分配到一個房間了，過了一會，有人拿了面試題過來，給了隔壁的小夥伴。。。我偷偷瞄了一眼，是 爪哇。過了一會又過來了，拿了兩份面試題，一份給了我，一份給了另一個小夥伴，都是前端的。面試題總共三頁還是四頁，都是基礎，拿起筆 pia pia 就寫了起來，過了一會就交了，剛交就想起來自己一道題做錯了，感覺很難受。。。小插曲：旁邊面 爪哇 的小夥伴用手機瘋狂百度，筆試過程沒人管的，我是老實人，不幹這事

一面

面試官感覺人不錯，拿著我的面試題和簡歷到外面去了，我趕緊和他說我一道題做錯了，並說了正確答案。面試官表示他還沒看面試題，然後過了一遍，不好意思，我好像全做對了。。。剛開始就隨便問了問this，嚴格模式和非嚴格模式下執行函式的this。

乾貨，整個過程都是用筆寫的

  1. 我提了，說面試題目太簡單了（現在想想的確這樣說不好），然後面試官就說，那我給你出個不簡單的，flatten的實現，我一想，這個我好像寫過，拿起筆，啪啪啪就寫起來了。過

  2. 問了我知不知道最近網上的快排事件，我說知道，就讓我寫了，我用的是最常用的3while寫法，寫到一半他就沒讓我寫了，我寫的和書上的一毛一樣。。。然後又讓我說出歸併排序的原理，這個沒有讓我寫了，我就直接說了，就是切成兩個陣列，巴拉巴拉，具體自己上網查詢。過

  3. 知道immer.js嗎，Mobx作者弄的一個不可變資料，知道的不多，就隨便說了說，然後又讓我說明了immutable.js的資料更新原理，和react的tree diff有點像，巴拉巴拉將自己知道說了。過

  4. KOA中介軟體原理，臥槽，這個我讀過原始碼，還分析過，就是通過compose組合中介軟體，巴拉巴拉。過

  5. 獲取所有檔案和資料夾。這個就是個樹結構，因為我記不清fs APi的使用了，就問能不能用dom樹去代替，面試官說可以，這個我寫過。。。巴拉巴拉，面試官說，能不能不用遞迴，用while+廣度+深度還是啥，我靠，我懵了，雖然我知道廣度優先，深度優先，但我特麼沒寫過啊，有點緊張，抓著筆思考了會人生，面試官看我這樣，就向我解釋了下。卒

  6. 面試官說：“那我問你一個哲學的問題，為什麼有資料結構這種東西？”哇，這是啥，巴拉巴拉扯了一通，大致就是物以類聚，人以群分，先人積累下來的經驗，這些讓我們更方便處理資料啥的。尬

  7. 對函數語言程式設計瞭解多少，對演算法瞭解多少。我函式式懂的不多，函數語言程式設計還是比較難的，什麼y組合子，聽著就暈。演算法就隨便說了些，動態規劃樹啊啥的。面試官問我是怎樣學習演算法的，我就說自己平時會在知乎看些相關的文章。然後面試官就說想我這樣零散的看並不能獲得太大提高，應該有組織的去看。關於函式式，他向我推薦了Haskell，說我只需要看看基本就可以了，然後再去看redux就會好很多。懵

  8. 又問了很多，然後問我想了解什麼，其實我知道XX的技術棧的，所以就說了些，表示有很大的興趣。

其他問題就不一一列舉了，他還問我看了關於node的什麼書籍，我張口差點說了《九淺一深nodejs》。。。我已經記不清楚是誰帶的頭了

總結：面試官和我說，人的知識結構是T字型的，底下的都是基礎知識，只有基礎知識弄好才能學習更廣的知識，然後說了我基礎不太好。。。我一想，完蛋，這下真涼了，我的認知裡，基礎是最重要的。

二面

一面面試官把我帶回去了，讓我等一會，過了一會，二面面試官來了，繼續和麵試官一起出去。二面問的問題就是舒服多了。

  1. 因為我在簡歷中寫了用了react和vue，就問了我兩者有什麼不同。我就說了更新策略啊，react通過setState手動批量更新，vue是Object.defineProperty去監聽屬性變化。然後還有什麼slot和this.props.children這樣。

  2. 關於redux的一些問題，熟悉redux一般不會有太大問題。

  3. 就是一些雜碎的問題，為啥想離職，關於離職，多從自身找問題，別說公司咋的咋的，很不好。

  4. 又問了些，然後問我想知道什麼，我balala說了一些，然後問面試是不是結束了，然後他說是，結果下個星期出來，我一聽，這下真涼了，好歹有個三面人事面吧。。。

最後面試官把我帶了回去，也沒說讓我走，等了半個小時，我想大概掛了，就找了別的員工問了下是不是自己可以走了，然後問了人事，說把我忘了。。。以為二面面試官把我送走了，準備打電話和我通知的。然後人事說讓我放心，給了口頭offer，正式offer下個星期給我，然後就是和說要準備什麼，讓我看郵件。總體面試效率比較高了。

結局

還算滿意吧，表現的的確不太好，但也算把自己學的東西說出來了。結局也是好的，順利拿到offer。

解析，補充一些小東西，具體看原始碼

  1. 扁平化陣列，flatten已經進入規範，在MDN上的Array可以查到該方法，記住一點，能用reduce的都用reduce，陣列運算，你的下次運算結果需要用到上次運算的結果，都可以用reduce。
const flatten = (arr) => arr.reduce((a, b) => {
  if (Array.isArray(b)) {
    return a.concat(flatten(b));
    // 該項是陣列，連線 遞迴呼叫的結果，否則直接連線
  }
  return a.concat(b);
}, []);
複製程式碼
  1. 深克隆

需要注意的坑就是typeof null、typeof RegExp('test')、typeof newDate()、typeof new Boolean(true)、typeof new String('t')、typeof new Number(1)為object，陣列和物件也要區分開，具體看原始碼。

  1. 求一個頁面多少dom節點

原理和flatten一樣，都是遞迴，看原始碼

  1. 求dom樹結構

這個個人覺得挺重要的，也很有趣，看原始碼，也是遞迴

  1. 求一顆dom樹的最大深度 原理是遞迴一次，就說明向下走了一層，記錄最大值，比較，結束後返回
const getDomDepth = (node) => {
  let max = 1;

  void function fn(d, m) {
    m++;
    Array.from(d.children).forEach(n => {
      if (n.children.length) {
        fn(n, m);
      } else {
        if (max < m) max = m;
      }
    })
  }(node, 1);

  return max;
}
複製程式碼

看原始碼->看原始碼->看原始碼，幫忙點star ==，遇到不理解的在issues裡面提出來，倒數第二題我還沒寫，因為當晚去看react的東西了，今天又去了前端千人峰會（一個人）。晚點補充。

這些東西也不算簡單，如果感到疑惑也沒什麼，分析出來只是希望能幫助大家理解一些東西，與君共勉，加油～

補充：明天好像是520，可惜我是隻單身狗。。。希望大家玩的開心吧

相關文章