記一次XX前端面試

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

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

中午吃飯的時候，收到了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);
}, []);
複製代碼

2. 深克隆

須要注意的坑就是typeof null、typeof RegExp('test')、typeof newDate()、typeof new Boolean(true)、typeof new String('t')、typeof new Number(1)爲object，數組和對象也要區分開，具體看源碼。

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

原理和flatten同樣，都是遞歸，看源碼

4. 求dom樹結構

這個我的以爲挺重要的，也頗有趣，看源碼，也是遞歸

5. 求一顆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，惋惜我是隻單身狗。。。但願你們玩的開心吧