悲喜交加的前端面試

時間 2019-12-05

原文原文鏈接

在如此惡劣的這經濟大環境下，勇敢的試水還在招聘的公司，將近一個月的時間，四家公司的面試，有喜有悲，讓我不得不感嘆，大城市的房價真的是太貴了，願此時此刻在讀這篇文章的你可以找的滿意的工做。前端

用友

一面

1.js的數據存儲？
答：說明白堆棧。
2.如何實現一個深拷貝？
答：遞歸。
3.數組返回自己的方法都有哪些？push返回什麼？
4.Object.assign 是深拷貝嗎？
答：不是。多層就不是了。
5.如何遍歷一個樹？
5.如何遍歷一個一維數組成爲一個樹？vue

{
                   menuId: 1,
                   name: "系統管理",
                   parentMenu: null
               },
               {
                   menuId: 2,
                   name: "系統管理",
                   parentMenu: null
               },
               {
                   menuId: 3,
                   name: "系統管理",
                   parentMenu: 1
               },
               {
                   menuId: 4,
                   name: "系統管理",
                   parentMenu: 1
               },  {
                   menuId: 5,
                   name: "系統管理",
                   parentMenu: 2
               },
               {
                   menuId: 6,
                   name: "系統管理",
                   parentMenu: 5
               },
               {
                   menuId: 7,
                   name: "系統管理",
                   parentMenu: null
               }
           ]）
複製代碼

答：react

function getTree(arr) {
          var arrs = []
          arr.forEach((item)=>{
              if (!item.parentMenu) {
                  arrs.push(item)
              }
          })
          return arr.reduce((h, m) => {
              if (m.parentMenu) {
                  foo(h, m)
              }
              function foo(arr, cur) {
                  arr.forEach(item=>{
                      if (item.menuId === cur.parentMenu) {
                          if (!item.children) {
                              item.children = []
                          }
                          item.children.push(cur)
                      } else if (item.children) {
                          foo(item.children, cur)
                      }
                  })
              }

              return h
          }, arrs)

      }
複製代碼

6.大家在工做中哪些地方用到了樹型數據？
答：權限控制。 7.vue如何實現雙向數據綁定？
答：主要就說說definePropertyios

二面

二面主要就是聊了聊業務，而後就是談錢。面試

同程藝龍

一面

1.vue的項目如何想轉成小程序的，有什麼思路？
答：將vue項目三部分拆分把。
2.大家在項目中如何使用axios？
答：就是分層調用，而後作了下全局攔截。
3.vue的生命週期有哪些？經常使用的有哪些？
4.列表的key有什麼做用？
答：可以在操做列表數據的時候優化計算。
5.講一下大家的權限控制是如何實現的？
算法

二面

1.你在項目開發中所負責的部分？
2.你是如何作技術選型的？
答：要看業務需求，時間，人員的技術掌握狀況。
3.vue和react區別？
4.說一下大家如何對性能進行優化？
答：舉了一個實際情景的例子。
5.你在項目中遇到過哪些問題？
答：請看其餘文章。
6.你平時都是怎麼學習新知識的？
答：看掘金
7.rn和flutter的性能哪一個好？爲何？
答：flutter
8.大家是如何收集用戶操做習慣的？
答：這個真沒作過。。
9.你有什麼問題想問的嗎？vuex

VipKid

一面

1.說一下你比較感興趣的知識？
2.數組的map方法用ts如何定義參數類型？
答：簡單的寫了下參數和返回值的類型，而後面試官說你這不是和沒寫同樣。。。
3.解釋一下ts的泛型？
答：大概就是動態類型把。
4.vue在數據發生變化的時候是否是隻更新對應的dom，而不改變其餘？是怎麼作的？
答：大概說了下虛擬dom 和 diff算法。
5.實現一個函數，傳入一個數字，返回一個包含小於該數字的全部質數的數組？
答：for循環這個數字，而後將質數放到一個數組裏，在這個循環裏面循環這個質數的數組，看看能不能整除。
6.實現一個函數，將給定數組[1,2,2,3,3,3,4]輸出成[[2, 2], [3,3,3]](若是相鄰的數字是重複的，放在一個數組裏)？
答：axios

function fooRe(arr) {
          return arr.reduce((h,m,i,a)=>{
              if (h.length===0) {
                 var itemArr = []
                  itemArr.push(m)
                  h.push(itemArr)
              } else if (h[h.length-1].indexOf(m)>-1) {
                  h[h.length-1].push(m)
              }else {
                  if (h[h.length - 1].length === 1) {
                      h.splice(h.length-1,1)
                  }
                  if (i === a.length - 1) {
                      return h
                  }
                  var itemArr = []
                  itemArr.push(m)
                  h.push(itemArr)
              }
              return h
          }, [])
      }
複製代碼

7.輸入一個url到能看見網頁內容這個過程的幾個關鍵節點是什麼？
8.你工做中遇到的問題有什麼？
9.工做以外遇到過什麼技術問題？
答：請看其餘文章。
小程序

二面

1.介紹一下你本身？
2.你是如何安排你和小組成員之間的工做的？
3.關於工期的評估你是怎麼作的？哪一個部分是最耗時的？
4.看你用到了react和vue的技術棧，他們的區別是什麼？和jq比哪一個渲染效率高？他們究竟在解決什麼問題？
答：大概就是前端工程化的問題。
5.大家是如何優化性能的？
6.看你在作rn和flutter的調研，結果是什麼？
7.大家有什麼交互複雜的情景，或者你遇到過的交互複雜的情景？這個情景在技術實現上有什麼難點？
答：說的是攜程機票的例子。
8.關於動畫你瞭解多少？
前端工程化

人人

一面

1.vue是如何實現雙向數據綁定的？
2.vuex的做用是什麼？
3.大家發送請求是如何作的？
4.vue的生命週期都有什麼？我想請求一個本地的文件要在哪發送請求合適？
5.在開發過程，靜態資源引入不進來須要怎麼處理？
答：放到static裏面
6.session和cookie的區別？
7.實現一下new和instanceof？
8.瞭解promise嗎？如何讓他停止.then?
9.爲何js中null是Object？
10.實現一個person.execute().sleep(3000)過3000ms以後執行execute方法？若是沒有execute方法直接執行sleep也要實現和剛纔同樣的效果，怎麼實現？
答：

// machine('ygy').execute()
      // start ygy
      // machine('ygy').do('eat').execute();
      // start ygy
      // ygy eat
      // machine('ygy').wait(5).do('eat').execute();
      // start ygy
      // wait 5s（這裏等待了5s）
      // ygy eat
      // machine('ygy').waitFirst(5).do('eat').execute();
      // wait 5s
      // start ygy
      // ygy eat
      和這個題相似。
    // 答案
       function machine(name) {
              return new Person(name)
          }

          class Person{
              constructor(name) {
                  this.name = name
                  this.list = ['']
              }
              async execute (){

                  const str = `start ${this.name}`;
                  if (!this.list[0]) {
                      console.log(str);
                  }
                  else {
                      this.list.splice(1,0,()=>{
                          return new Promise(resolve => {
                              setTimeout(()=>{
                                  console.log(str);
                                  resolve()
                              }, 0)
                          })
                      })
                  }
                  if (this.list.length !== 0) {

                      for (let i = 0; i < this.list.length; i++) {
                          if (this.list[i]) {
                              await this.list[i]()
                          }
                      }
                  }
              }
              do (type) {
                  this.list.push(()=>{
                      return new Promise(resolve => {
                          setTimeout(()=>{
                              console.log(`${this.name} ${type}`)
                              resolve()
                          }, 0)
                      })
                  })
                  return this
              }
              wait(num) {
                  this.list.push(()=>{
                      return  new Promise(resolve => {
                          setTimeout(()=>{
                              console.log(`wait ${num}s`)
                              resolve()
                          }, num*1000)
                      })
                  })
                  return this
              }
              waitFirst(num) {
                  this.list.pop()
                  this.list.unshift(()=>{
                      return  new Promise(resolve => {
                          setTimeout(()=>{
                              console.log(`wait ${num}s`)
                              resolve()
                          }, num*1000)
                      })
                  })
                  return this
              }
          }
複製代碼

後面那問題直接執行異步執行構造函數就好了
11.講一下事件循環？
答：執行棧和事件隊列。
12.說一下如何實現一個發佈訂閱？

class EventBus {
        constructor() {
            this.event = {}
        }
        on(type, fn) {
            if (!this.event[type]) {
                this.event[type] = fn
            }
        }
        emit(type, msg) {
            this.event[type](msg)
        }

    }


    const eve = new EventBus()

    eve.on('test',function (res) {
        console.log(res)
    })


    eve.emit('test','haha')
複製代碼

超簡單的一個。
13.路由的兩種模式？區別是什麼？
答：hash和history，後者須要後臺作處理。

不少問題的答案沒寫，有些是重複的，有些是開放性的，有些在個人其餘文章裏面，

總結

這四家面試是投了將近一個月的結果，應該都只能算是中級前端的水平把，前三家基本技術上都經過了，最後一家一面沒過，面的其實還不算難，可是對細節要求比較高，面了2個多小時，感受仍是挺遺憾的。不過總體來講，面試的收穫不小，可以更加看清本身的不足，有些東西確實掌握的沒有那麼到位，還須要繼續學習。若有大佬路過，還請指導一二。最後，依然在等offer中。。。 - . -!|||

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。