六月份面試小記

六月並非一個換工做的好時候，部分公司關閉了HC通道，加上三伏天的悶熱，以及仍是在職。寫這篇文章主要是想記錄這段時間來的面試經驗，若是有相似狀況的同窗歡迎討論。 只適合工做0-2年同窗閱讀，大佬請點擊右上角的'X'

我的背景：base武漢，兩年經驗，非計算機相關專業，小211，投出簡歷30-40封，只收到面試邀請5家(慘==)，正式offer 2家，口頭offer 2家，未過 1家。

廢話少說，進入下面的面試題。

---

1.請詳細說出判斷js類型的方式

(1)typeof

能夠判斷出'string','number','boolean','undefined','symbol'

但判斷 typeof(null) 時值爲 'object'; 判斷數組和對象時值均爲 'object'

(2)instanceof

原理是 構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置

eg:function A() {}
let a = new A();
a instanceof A     //true,由於 Object.getPrototypeOf(a) === A.prototype;
複製代碼

(3)Object.prototype.toString.call()

經常使用於判斷瀏覽器內置對象,對於全部基本的數據類型都能進行判斷，即便是 null 和 undefined

(4)Array.isArray()

用於判斷是否爲數組

2.爲何要用到淺拷貝和深拷貝？二者區別和經常使用方法？

由於js中存在複雜數據類型。

淺拷貝會將對象的屬性值一一複製，當某屬性值是引用類型時，複製的是它的引用，若是引用指針指向的對象被改變時，拷貝下來的值也會跟着改變。

而深拷貝則會遞歸到該屬性值爲基本類型再複製，拷貝先後的二者互不影響。

淺拷貝：

• Object.assign()
• Array.prototype.slice()
• 擴展運算符 ...

深拷貝：

• JSON.parse(JSON.stringify())
• 遞歸函數 請閱大佬文章--手寫遞歸實現一個深拷貝

請閱大佬文章--詳細解析賦值、淺拷貝和深拷貝的區別

3.三種數組去重的方法(儘可能使用ES6)？

（1）[...new Set(arr)]

（2）let newArr = arr.filter((item,index) => {
        return arr.indexOf(item,0) === index;
    });
    
（3）let newArr = [];
    for(let i of arr){
        !newArr.includes(i) && newArr.push(i);    
    }
複製代碼

這題還能夠改成數組的扁平化(天然是不能只用flat()的)，數組相關的知識仍是比較喜歡問的吧。

4.瀏覽器存儲的方式有哪些？區別是什麼？

(圖片來源網絡，侵刪)

還簡單說了下cookie本來並非用來儲存的而是用來與服務端通訊的，須要自行封裝api；

而localStorage則自帶getItem和setItem方法，使用更方便。

4.1 若是趕上禁用setItem的瀏覽器怎麼辦？

先使用try...catch

5.DOM事件有哪些階段？談談對事件代理的理解？

分爲三大階段：捕獲階段--目標階段--冒泡階段；

事件代理簡單說就是：事件不直接綁定到某元素上，而是綁定到該元素的父元素上，進行觸發事件操做時(例如'click')，再經過條件判斷，執行事件觸發後的語句(例如'alert(e.target.innerHTML)')；

好處：(1)使代碼更簡潔；(2)節省內存開銷

6.transform、translate、transition分別是什麼屬性？CSS中經常使用的實現動畫方式？有沒有用過rAF(requestAnimationFrame)？

6.1 三者屬性說明

transform是指變換、變形，是css3的一個屬性，和width，height屬性同樣；

translate是transform的屬性值，是指元素進行2D(3D)維度上位移或範圍變換;

transition是指過渡效果，每每理解成簡單的動畫，須要有觸發條件。

這裏能夠補充下transition和animation的比較，前者通常定義開始結束兩個狀態，須要有觸發條件；然後者引入了關鍵幀、速度曲線、播放次數等概念，更符合動畫的定義，且無需觸發條件

6.2 對rAF的闡述

定時器一直是js動畫的核心技術，但它們不夠精準，由於定時器時間參數是指將執行代碼放入UI線程隊列中等待的時間，若是前面有其餘任務隊列執行時間過長，則會致使動畫延遲，效果不精確等問題。

因此處理動畫循環的關鍵是知道延遲多長時間合適：時間要足夠短，才能讓動畫看起來比較柔滑平順，避免多餘性能損耗；時間要足夠長，才能讓瀏覽器準備好變化渲染。

這個時候rAF就出現了，採用系統時間間隔(大多瀏覽器刷新頻率是60Hz，至關於1000ms/60≈16.6ms)，保持最佳繪製效率，不會由於間隔時間太短，形成過分繪製，增長開銷；也不會由於間隔時間太長，使用動畫卡頓不流暢，讓各類網頁動畫效果可以有一個統一的刷新機制。而且rAF會把每一幀中的全部DOM操做集中起來，在一次重繪或迴流中就完成。

7.vue的nextTick的原理是什麼？

7.1 爲何須要nextTick

Vue是異步修改DOM的而且不鼓勵開發者直接接觸DOM，但有時候業務須要必須對數據更改--刷新後的DOM作相應的處理，這時候就可使用Vue.nextTick(callback)這個api了。

7.2 理解原理前的準備

首先須要知道事件循環中宏任務和微任務這兩個概念(這其實也是面試常考點)請閱大佬文章--完全搞懂瀏覽器Event-loop

常見的宏任務有script, setTimeout, setInterval, setImmediate, I/O, UI rendering

常見的微任務有process.nextTick(Nodejs),Promise.then(), MutationObserver;

7.3 理解nextTick

而nextTick的原理正是vue經過異步隊列控制DOM更新和nextTick回調函數前後執行的方式。若是你們看過這部分的源碼，會發現其中作了不少isNative()的判斷，由於這裏還存在兼容性優雅降級的問題。可見Vue開發團隊的深思熟慮，對性能的良苦用心。

若是你比較瞭解了前面的事件循環原理，推薦你看看這篇文章 請閱大佬文章--全面解析Vue.nextTick實現原理

8.描述下vue從初始化頁面--修改數據--刷新頁面UI的過程？

當Vue進入初始化階段時，一方面Vue會遍歷data中的屬性，並用Object.defineProperty將它轉化成getter/setter的形式，實現數據劫持(暫不談Vue3.0的Proxy)；另外一方面，Vue的指令編譯器Compiler對元素節點的各個指令進行解析，初始化視圖，並訂閱Watcher來更新試圖，此時Watcher會將本身添加到消息訂閱器Dep中，此時初始化完畢。

當數據發生變化時，觸發Observer中setter方法，當即調用Dep.notify(),Dep這個數組開始遍歷全部的訂閱者，並調用其update方法，Vue內部再經過diff算法，patch相應的更新完成對訂閱者視圖的改變。

請閱大佬文章--手寫Vue雙向綁定

請閱大佬文章--Vue之Virtual Dom和Diff算法

9.談談平常工做中是如何使用vue組件化的？

這個問題主要是由於簡歷中有寫到，個人回答以下(僅是我的理解，非標答)：

首先我認爲組件化有3大要素：

• prop---組件接受的參數，簡單說也就是數據。最好使用對象的形式，這樣能夠規定類型type和校驗規則validator
• event---組件間傳遞消息的方法
• slot---靈活使用具名和匿名插槽，給組件動態插入某些內容或組件

而後我補充到由於工做中Echarts用的比較多，而Echarts每一個圖表的配置參數又比較複雜，因此從統一性上來講，提取頁面中各個圖表元素的共同點，做爲默認配置寫入組件；從差別性上來講，總會有些特(qi)性(pa)需求須要實現或者線上環境的特殊數據須要適配，這就考驗到組件化的兼容性和容錯率。

咱們工程中圖表組件的個性化基本配置都是經過json文件key--value形式傳遞的，若是某一屬性爲空則取默認值；有時會存在某一圖表聯動另外一圖表的狀況，則能夠在json裏傳一個flag標誌位。

以下圖中5項數據指標，其中1項特別大，其餘4項特別小的時候，視覺上會不太直觀

咱們會在組件裏判斷是否要在餅圖的下面動態生成數字卡片，以下圖

綜上：組件化的使用須要 前期作好充足的分析調查，目的即 代碼解耦、複用

請閱大佬文章--封裝Vue組件的一些技巧

請閱大佬文章--寫過『通用前端組件』嗎?

10.vue-cli替咱們作了哪些工做？

首先須要知道vue-cli是什麼？它是基於Vue.js進行快速開發的完整系統，也能夠理解成是不少npm包的集合。

其次，vue-cli完成的功能有哪些？

• .vue文件 --> .js文件
• ES6語法 --> ES5語法
• Sass,Less,Stylus --> CSS
• 對jpg,png,font等靜態資源的處理
• 熱更新
• 定義環境變量，區分dev和production模式
• 。。。

若是開發者須要補充或修改默認設置，須要在package.json同級下新建一個vue.config.js文件 （這題我以爲答的不太好，我的在查閱Vue官網和搜索後也沒能總結出比較滿意的答案）

11.模塊化解決了哪些問題？url-loader和file-loader的區別？

• 文件依賴
• 代碼複用
• 全局污染，命名衝突

url-loader封裝了file-loader，但url-loader並不依賴於file-loader；二者都是在Webpack中處理圖片或者圖標字體文件。

file-loader返回的是url；url-loader會根據limit對文件分狀況處理。當小於limit時，會返回base64;當大於limit時，會調用file-loader

12.webpack-dev-server和http服務器如nginx有什麼區別? HRM(HotModuleReplacement)的好處是什麼？

webpack-dev-server使用內存來存儲webpack開發環境下的打包文件，而且可使用模塊熱更新，相比傳統http服務器開發更加簡單高效。

好處就是在保存當前頁面狀態前提下(例如Tab條的第n個tab)，局部更新代碼

13.Hash和History兩種路由模式的根本區別是什麼？

這道題是我答的最尷尬的一道題，我當時的回答是這樣的：

Hash是指url的#以及後面的字符串，hash值變化並不會向服務器發送請求，而是觸發hashchange事件；

History是HTML5新增內容，須要服務端配合使用，有pushState，replaceState相關api，能夠直接在控制檯輸入window.history.back()或者.forward()實現頁面得前進或者後退。而且Hash兼容ie8，History只能兼容ie10...

當我噼裏啪啦說完這些後，面試官淡淡得說了一句：你好像沒聽明白個人問題，我是問二者的根本區別是什麼？

我當時想了20s，回答說：很差意思，我想我不太清楚答案，麻煩您告知一下。

面試官說：Hash模式下會隨機生成一個值，而History下先後url都會記錄在瀏覽器中。這種基本的問題應該是知道的呀！(好吧==，我比較菜)

14.說一下實際工做中解決異步的方式及相應的優缺點？

• callback：回調地獄；
• Promise: .then()鏈式寫法，較callback更加優雅，.catch()捕獲異常錯誤。缺點是沒法暫停(我的認爲若是業務邏輯比較複雜，Promise寫起來多少又像是變回了回調地獄)；
• async和await：同步的方式寫異步，更直觀清晰。但缺乏併發性，由於await會阻塞代碼；

考察更細一點的話，還能夠問：

14.1 一句話描述下什麼是Promise？ 答：如今未執行的事情未來必定會發生。Promise就是一個狀態機，特色是狀態(pending,rejected,fulfilled)的傳遞。

14.2 手寫一個簡易版的Promise？ 請閱大佬文章---JavaScript手寫代碼無敵祕籍

---

綜上，我的認爲這些面試題都比較常規吧(應該是由於都不是大廠，因此要求比較通常)，好好準備下80%是能夠回答上的。準備面試和參加面試都是一種學習方式，不只能查漏補缺，對脫離業務以外的我的水平也有不小的提升。

最後我想說幾句內心話：今年年初就在吹寒冬來襲，我我的認爲中上游的公司對招聘者依舊飢渴，中下游的公司隨着業務調整並不急得招人，而是不緊不慢，慢挑細選(最終找到差很少水平最便宜的那一位)，在此我想diss一家叫作 東*網力(規模還挺大)的公司，面試先後都挺客氣，過了幾天問結果說是：已經在走發offer審批流程了，耐心等幾天。再過幾天就沒有而後了，WX發消息不回，有合適的人直說就是，hr這種行爲是個什麼操做。

祝願還在找或者準備找工做的小夥伴們都能獲得比較滿意的結果。感謝閱讀，歡迎吐槽留言點贊三連擊~