繁花五月，剛出爐的前端面經千萬不要錯過|掘金技術徵文

時間 2020-05-09

標籤繁花五月 5月剛出爐端面千萬不要錯過技術徵文简体版

原文原文鏈接

前言

你好呀，我是wangly，一名下班摸魚的前端老倒黴蛋了。受疫情影響，今年初中級崗位廣泛少了好多，此時的我已經抱着手機留下了悲痛的淚水。先來講下個人故事吧。而後在總結下對線覆盤。javascript

我是今年2020屆的專科應屆生，已經有實習一年的經歷，大廠進不去，小廠壓價格，在如今公司15我的的Team擔任前端工程師，對公司項目進行協同開發和獨立完成。天天下班都會在想之後的發展，原本已經作好的跳槽計劃也被一隻蝙蝠的故事給打亂了。之因此萌生跳槽的想法是由於如今公司的業務和個人成長到達了一個須要尋找突破的時候，再加上自己城市並非互聯網很是發達，經濟也不是很是景氣。慢慢的接觸了一些電話面試，可無奈於本身專科的學歷，並無多少好的機會。個人目標很簡單，找一家有本身產品的，有經營計劃的公司。可無奈於現實就是如此，不是你不夠優秀，而是還優秀不到讓別人注意到你。 2020年的目標是: 在一線找一家有本身產品的公司穩定下來，沉澱本身。css

對線詳情

總體都在追問或者被追問的狀況下。面試精心動魄。像極了當年的Ryu被絲血反殺。對線時長2個小時15分鐘，白嫖水三杯，糕點一盤。html

面試過程

面試過程分爲筆試和麪試兩個階段，筆試考察一些手寫代碼和理解，面試考察了一些業務場景和懟項目。很是的細緻，前端

筆試

筆試題目很簡單，無非就是一些基礎的手寫代碼和常識問題。但若是沒有系統過很是容易掛科。java

1.實現一個左邊固定，右邊自適應的DIV佈局

// DOM 結構
<div class="container">
  <div class="aside">left</div>
  <div class="section">right</div>
</div>

// Style樣式
.container {
  display: flex;
}
.container .aside {
  flex: 0 0 200px;
}
.container .section {
  flex: 1;
}
複製代碼

2.使用兩種方式實現box居中

// DOM結構
<div class="container">
  <div class="box"></div>
</div>

// 方案一：flex方案

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box {
  background: red;
  min-width: 100px;
  min-height: 100px;
}

// 方案二：position方案
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.container .box {
  background: red;
  min-width: 100px;
  min-height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
複製代碼

3.如何給一組列表首尾以外的元素添加樣式

// 考察了css僞類的使用

// DOM
<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
</ul>

// Style

.list > .item:not(:first-child):not(:last-child) {
  /* ... style */
}

複製代碼

4.JavaScript的數據數據類型有哪些?

答：JavaScript鍾分爲基礎類型和引用類型，分別是：ios

基礎類型：number，string，boolean，null，undefined
引用類型: object，function，array

5.下面foo函數輸出值是什麼

// @function foo
function foo(i) {
  try {
    if (i === 1) {
      return i
    }
  } catch (error) {
    return 0
    
  } finally {
    ++i
    return i
  }
}

// @console
console.log(foo(1))
複製代碼

答：2git

6.給定一個數組，請你按照升序 & 降序的規則去排列它

原始數組：[1, 4, 10, 2, 5, 18, 14] 答：github

// @function bubble
function bubble(arr, state) {
  const len = arr.length
  let template
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (state === 'up') {
        if (arr[i] < arr[j]) {
          template = arr[i]
          arr[i] = arr[j]
          arr[j] = template
        }
      }
      if (state === 'down') {
        if (arr[i] > arr[j]) {
          template = arr[i]
          arr[i] = arr[j]
          arr[j] = template
        }
      }
    }
  }
  return arr
}

// @console
console.log(bubble([1, 4, 10, 2, 5, 18, 14], 'down'))
複製代碼

7.下面一段代碼執行的結果是什麼

var name = 'zangsan';
(function () {
  console.log(name)
  name = 'Lisi'
  console.log(window.name)
  var name = 'wangwu'
  console.log(name)
})();
複製代碼

答: undefined > zangsan > wangwuweb

8.for 循環和 forEach循環的區別在於？

答：面試

for循環爲原生語法糖，無上下文，而forEach則是Array上的方法。
for 循環能夠經過break, continue進行中途退出循環，而forEach則不行。

9.執行下面的異步函數大約須要消耗多長時間?

// @promise function
function speed() {
  return new Promise(resolve => {
    setTimeout(resolve, 3000)
  })
}

// @async function
async function foo() {
  let mySpeed = speed()
  await mySpeed
  await mySpeed
  await mySpeed
  await speed()
  await speed()
  await speed()
}

foo()
複製代碼

答：約等於12S，可是時間超出12S。

10.請你實現一個簡單的防抖函數?

答：

// @function shake
function shake(fun, time) {
  let timeController = null
  return (...args) => {
    timeController !== null && clearTimeout(timeController)
    timeController = setTimeout(() => {
      fun.apply(this, args)
    }, time)
  }
}

// @test function
function myText() {
  console.log('text......')
}

// @output
shake(myText, 3000)
複製代碼

11. localStorage、sessionStorage、cookie之間的區別?

答: 它們都是用來作數據持久化的存儲方式，

cookie存放在客戶端，隨着瀏覽器關閉，cookie將會丟失。存儲大小爲4K
sessionStorage: 只在本次會話有效，當瀏覽器關閉或者頁面關閉後將會失效，存儲大小爲 > 4M
localStorage：存儲在瀏覽器本地，除非手動清除或意外因素，通常不會丟失。存儲大小爲4M

12. 一些題目記不起來了...

面試

打完題後，仔細看了一遍。確保無明顯問題後，就交給旁邊的HR了。估計是拿去技術部作評估。我的以爲其實筆試挺坑的。真正開發中對於一些筆試題基本毫無接觸。所以每次面試都須要花大量時間去過一遍知識點，查缺補漏。過了差很少5~6分鐘後，人事小改改就帶我去一個獨立的辦公室進行面試。裏面已經坐了兩我的，一個看上去是經理一個應該是前端。我坐下後，他們手裏已經拿了個人簡歷。估計是已經看過了。隨着小改改出去關上門後（全軍出擊），對線開始：

自我介紹

自我介紹其實不多去看，大體上我也是按照一些點來去說一些不犯錯誤的廢話。

我是誰，XXXX學校專科，所學專業。
前後在兩家公司從事Web前端工程師實習和全職工做，有1年以上的工做經驗，主要使用Vue技術體系作爲項目基建。前後經歷4個項目，涉及大型後臺管理項目的協同開發，公司內部企業微信H5，小程序服務程序的獨立開發。
閒暇之餘喜歡看書，學習新技術，寫開源項目和博客總結。......其實真的扯不上多少。哪位有好的模板能夠救救我這個老倒黴蛋。

自我介紹後，就開始提問對線了。

1. ES6中你經常使用的新特性有哪些? 你是怎麼使用它的？

答：

首先是新的塊級變量定義方式, let & const，在項目中我默認使用 const 來定義個人變量，只有涉及變量賦值時，我纔會將其聲明爲 let 。
其次是模板字符串，之前的時候都是採用 + 和 toString 來去作一些字符串的拼接，如 URL 。這樣拼接後可讀性很是的差。當ES6模板字符串出現後我就立馬在項目中使用起來了。
解構賦值是一個很是強大的功能，在Vue中不管是 methods 仍是 computd 中都會涉及大量的 data 響應式變量讀取，那麼我就能夠將Vue的 this 解構出來，將須要使用的 data methods ...解構出來，能夠避免代碼中存在大量的 this.XXX 避免這種糟糕的代碼風格。
箭頭函數大大的縮短了一些 function 的書寫，通常做用在 callback 中，能夠快速的進行函數調用。如 foreach ， map 等方法。
Set & Map在個人項目中常用，由於涉及到一個表格模板。由於表格數據格式並不固定，因此我常常規劃後臺返回數據格式爲我上傳的格式，一般爲 key value ，這樣後臺返回給個人值，我能夠經過Map將其填充成鍵值對後在表格渲染出來。由於Map的 key 存儲的數據類型很是的棒。而Object則作不到這點。
Promise和Async異步處理他解決了之前異步的回調地獄，讓JavaScript的異步有了更好的體驗。一般在Vue中數據請求都是經過Promise的形式來去作數據的異步獲取的。

獲取是說的有點久了，否則這個東西還能說一個小時。我就說，ES6的更新有點多，我就挑了一些有表明性的特性講了下。可能面試官也以爲本身問的太寬泛了。也及時贊成，開始了下一題。

2.你剛纔提到了Promise，你知道它的API嗎？

答：

resolve
reject
then
catch
finally
all

3.Promise的rece API你知道嗎？

答：上一題好像忘記說了（尷尬），這個方法我並非很經常使用。它的做用是作一個併發的比較，併發N個Promise當有一個返回告終果，它就結束了。誰先執行完，它的結果就是那個Promise的返回值。參數和Promise.all是同樣的的。

4. Axios如何同時發送多個請求？

答： Axios自己實際上是一個Promise，能夠經過Promise.all 的方式去執行多個Axios請求。Axios內部也提供Axios.all方法，使用方式和Promise.all相同。

5. 請求後端數據提示跨域你是如何解決的。

答：我我的傾向於使用CORS方案，CORS標準新增了一組頭部字段，容許服務器聲明哪些源站有權限訪問哪些資源。這個須要後端來進行配合。另外一種就是使用Nginx代理轉發了。

這一塊我回答的不是很好，小夥伴若是不懂能夠去複習下瀏覽器跨域方案。

6. Vue中v-show 和 v-if的區別

答： v-if指令會在渲染View視圖中，主動去忽略綁定的DOM，它不會被加載到虛擬DOM，天然在ViewDOM中也不會去顯示。 v-show指令會給綁定的DOM添加一個 display: none 的style樣式，來達到實現隱藏和顯示功能。

7.computed 和 watch 能和我說下嗎？

答： computed是一個單獨的屬性，不能和methods / data 中的值名稱重複。它存在緩存性，當你依賴的計算值沒有發生改變時，computed會保持當前的值不變化。不支持異步 watch只能觀測 data 中的值，且一個函數只能監視一個。主要用於對某個值進行一個監聽操做。

8. Vue3在響應式綁定上作了哪些變化，爲何這麼作？

答：

1.Vue2使用了Object。defineProperty來進行數據劫持，Vue3則更換爲了新的Proxy API，Object.defineProperty只能劫持對象屬性，而Proxy能夠直接代理觀察對象。
Object.defineProperty對對象屬性的觀察較弱，當對象新增和修改屬性時，須要從新指定Observe，否則極可能致使Observe盲區。反之Proxy代理對象支持很是友好，支持大部分常見的操做攔截。

9. VueRoute組件路由守衛有哪些?

答：

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

10. VueRoute有哪幾種模式，它們有什麼不一樣？

答：有兩種路由模式，分別是 hash history ，

hash模式下，URL中會帶有一個 # 號，history沒有。
history路由若是後端部署沒有更改頁面指向則會出現刷新和跳轉404的問題，而hash路由卻不會
hash路由相對history兼容比較好。

11.Vuex中模塊命名空間能和我說下嗎？

答：經過export 導出模塊，設置 namespaced: true來開啓命名空間，這樣模塊就擁有本身的模塊歸屬了，如：A模塊中有一個action名稱爲test，則咱們就能夠經過 a/test 來找到它，避免Vuex的模塊產生衝突。

12. Vuex中Mutation 和 Action有什麼區別

答： Mutation主要是用來改變state當中的數據，所以它主要做爲一箇中間人。它不支持異步，這樣就能夠被Vue監聽，devtools就能夠同步到它的記錄。若是它是異步的，那麼就極可能致使devtools沒法同步它究竟何時發生改變。而咱們經常使用的方式是經過Action來提交Mutation，由於Action是一個異步的過程，因此這樣作既保證了邏輯的異步調用，同時不破壞Mutation的記錄良好。方便開發者調試。其實就是一個數據的交換過程。

13. 後面幾題忘記了

懟項目

激動人心的懟項目環節，有些內容有點私密，就不會全寫出去。這一塊其實都是看本身的項目理解。我這裏就挑選幾個對話做爲參考吧。

Q: 看你公司的項目使用了webSocket，爲何要要去使用它呢？

A：由於我這個項目有些重要消息須要實時的去獲取，若是用戶長時間不去訪問Message的接口，若是錯過了重要報警推送會很是的麻煩。這個和美團的騎手微笑行動同樣邏輯。

Q：既然使用了webSocket，你能說下webSocket經常使用的API嗎？

A：webSocket的API分爲

onopen()，打開通道並鏈接ws
send()，發送消息
onmessage()，ws消息回調
onerror()，ws鏈接錯誤
onclose()，ws鏈接關閉

Q：既然要保持socket鏈接，那麼你是如何保持當前socket鏈接正常的？

A：我作一個定時的ping操做，這裏成爲：「心跳響應」，人是如何判斷自身存活或者死亡的。其實最快的方式就是本身的心跳，只要你的心跳還在跳動，那麼你就算還活着。所以，我每隔必定的時間使用ws.send()發送一個無心義的ping消息。告訴後臺我還在鏈接。後臺收到後，也就繼續推送消息。而若是ping 消息錯誤了。那麼就說明ws可能意外的中斷了，那麼會走onerror()方法，這時候，我能夠重新開始喚醒它。這樣我就能懟webSocket保持一個相對的鏈接持久化了。

後續我就不講公司項目了，其實就是一個問答環節，本身作的模塊本身應該清楚的。(●'◡'●)，後面問了我我的項目，這卻是沒有啥隱瞞的。

Q：你本身實現了一個UI組件庫？

A：是的，這是我下班時候練手寫的。一共有22個組件，文檔尚未更新到最新版本的。

Q：組件的總體風格是你設計的仍是？

A：是我本身憑感受寫的，只是一些尺寸參考了螞蟻的AntD Vue來去設計的，配色和樣式是我本身憑空想出來的，哈哈。

Q：那麼你能和我說下你的tooltip是怎麼實現嗎？

A：這個tooltip組件是我使用僞類去實現的，經過before，after僞類中的content能夠經過CSS的attr(屬性)函數獲取動態值作綁定，而後經過定位去畫出來的。核心就是CSS的僞類，attr(tootip)，position定位等CSS的用法。

Q：瞭解了，看你的大部分組件都是隻實現了簡單的功能，是否有作過深刻呢？

A：這是一個長期維護的項目，一開始只是來練手，隨着就是封裝經驗愈來愈豐富，對比前面的功能會發現很low，因此後續Vue3出來後會作一個重寫。優化代碼結構。

Q：看了下你的模態框，感受挺有意思的，能和我說下嗎？

A：好的，這個模態框的設計思路來自於Mac系統的對話框，當時以爲挺有意思，就決定把它搬運到組件庫中來，又從新去構思了下，就作成如今這個樣子了。不過裏面大部分的API都是一些經常使用的，沒有作一些比較定製的功能。

Q：......

A：......

如下省略掉後面都是在看項目，以爲有意思就問下一些東西。

面試總結

整體面試其實不像文章中描述的平淡無奇，其實還有好多緊張，卡頓得地方。省略了一些問題，由於沒有帶錄音筆，因此不少都是憑藉記憶覆盤的。放假在家恰好喝了點雞湯，補充了下身體。就作一個總結，但願對還在求職的你有一個幫助。今年找工做確實難，尤爲是像我這種學歷低，經驗少的童鞋，是真的心累。但我仍是會堅持下去的，咱們一塊兒加油哦。你們在面試結束後，其實有個套路不知道大家有沒有發現：