摘要：前言發表一下自己對面試的看法。首先面試跟實際水平是有偏差的，與工作經驗是有關系的，但也不是正比關系。暫時先寫到這兒吧最近手頭事兒比較多，還有面試，有經典的題再跟大家分享后續持續更新如果有更好的方法，請及時交流。最近在面試，多多交流面試題

發表一下自己對面試的看法。首先面試跟實際水平是有偏差的，與工作經驗是有關系的，但也不是正比關系。

手寫代碼跟手敲代碼區別挺大的，手敲代碼能進行調試，但是手寫代碼，會犯很多的低級錯誤，因為脫離了IDE帶來的提示。不過手寫代碼是能夠看出面試者的思路的，大部分的面試官基本只是看看思路以及邏輯嚴謹性。

另外，其實面試就是公司讓你去造飛機，其實工作頂多擰擰螺絲釘。不過每個人知識的深度和廣度，以及這個人的潛力，有經驗的面試官是能夠看出來的。這也是面試的時候offer到手的籌碼，別以為背背面試題就可以了。平時多嚴格要求自己，多多得研究和總結。

公司名字我都不寫了基本都是大廠，有些公司的面試題我沒有貼出來，都是爛大街的前端面試題，大家看看這篇文章就夠了。

題目我也只是挑一些自己覺得比較經典的，分享給大家！

1、寫一個函數fn(10)，獲取0-100以內的隨機數傳入一個數組，數組內不能重復出現想同的數字，數組長度為10(下面寫的代碼進行了一部分改造原題）；

function getRandomNum(num,[min,max]){
    let arr = [];
    if(typeof num === "number" && typeof min === "number" && typeof max === "number"){
        // console.log(num,min,max);
        while(true){
            let isExit = false;
            let randomNum = parseInt(min + (max-min) * Math.random());
            //方法一：
            // for(let i = 0;i

2、給定這么一個數據：
let data = [{
    id:1,
    name:"北京"
},{
    id:1,
    name:"天津",
    children:[{
        id:1,
        name:"西青"
    },{
        id:1,
        name:"和平",
        children:[{
            id:1,
            name:"和平一"
        },{
            id:1,
            name:"和平二"
        }]
    }]
}]
寫一個函數將數據內的key值name和children相應的替換成lable和city：
function dealData(arr){
    if(arr instanceof Array){
        let dealedArr = JSON.parse(JSON.stringify(arr));
        let new_arr = changeKey(dealedArr);
        return new_arr;
    }else{
        throw Error("請傳入數組！")
    }
}

function changeKey(arr){
    let new_arr = arr.map((item,index)=>{
        if(item.hasOwnProperty("name")){
            item["lable"]=item["name"];
            delete item.name;
        }
        if(item.children && item.children.length > 0){
            item["city"] = changeKey(item.children);
            delete item.children;
        }
        return item;
    })
    return new_arr;
}
let arr = dealData(data);
console.log(arr);

3、給一個數組如下
const tree = [ "1", ["2", "3"], [4, ["5",6]]];
需要改造成
let new_tree = ["1", "2", "3", 4, "5", 6];
這道題面試的時候，一眼看過去真的會懵逼，反正我是懵逼了。不過只要懂一些iterator的知識，其實并不難；
const tree = [ "1", ["2", "3"], [4, ["5",6]]];

function* iteratorTree(tree){
    if(typeof tree === "string" || typeof tree === "number"){
        yield tree;
    }else if(tree instanceof Array){
        for (const i of tree) {
            yield* iteratorTree(i)
        }
    }
}


// for(const i of iteratorTree(tree)){
//     console.log(i);
// }
console.log([...iteratorTree(tree)]);
4、說一說promise的實現原理
so，我也是比較懵逼的，只是會用而已，惡補了下這篇文章；

5、js類型檢測的各種方法及其對比
轉移現場，看看這篇文章

6、vue雙向綁定的基本原理
這個題我估計只要考到vue，基本都會考到吧！
vue.js 是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那么就能監聽到了數據變化
第二步：compile解析模板指令，將模板中的變量替換成數據，然后初始化渲染頁面視圖，并將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖
第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
1、在自身實例化時往屬性訂閱器(dep)里面添加自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能調用自身的update()方法，并觸發Compile中綁定的回調，則功成身退。
第四步：MVVM作為數據綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監聽自己的model數據變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變更的雙向綁定效果。

這種題一般考到之后，先問你了解發布者訂閱者模式（觀察者模式）的實現，再問你是否了解其他的js的設計模式；
其實，只要我們曾經在DOM節點上綁定過事件函數，那我們曾經就使用過發布-訂閱模式；比如click事件，給某個dom節點添加click事件，其實就是訂閱了這個dom節點的click事件，當這個dom被點擊的時候，就會像訂閱者click事件發布這個消息。
發布訂閱者模式我用得也很少，用得比較多的也就是單例模式和代理模式，遇到這種情況的了解哪一種說哪一種吧，別瞎比比就行。畢竟面試要求你什么都會，而實際工作需要用什么。js設計模式建議大家還是多看看，畢竟前人總結出來的好東西，不用一用，你還好意思說自己是站在巨人的肩膀上么？

7、vue生命周期鉤子的理解(vue2.0+)



beforeCreate：在實例初始化之后，數據觀測(data observer)和event/watcher事件配置之前被調用。

created ：實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。

beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用，也就是說，render函數此時會生成虛擬的dom節點，即vm.$el；

mounted：el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子。如果root實例掛載了一個文檔內元素，當mounted被調用時vm.$el也在文檔內。

beforeUpdate：數據更新時調用，發生在虛擬DOM重新渲染和打補丁之前。 你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。

updated：由于數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鉤子。當這個鉤子被調用時，組件DOM已經更新，所以你現在可以執行依賴于DOM的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。

beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 該鉤子在服務器端渲染期間不被調用。該鉤子在服務器端渲染期間不被調用。


8、http狀態碼有哪些？
大概說說就行，這種狀態碼，其實工作中遇到了直接就給后臺說一聲就行，反正我從來不記，面試的時候，大致看看記了一下
100-199 用于指定客戶端應相應的某些動作。
200-299 用于表示請求成功。
300-399 用于已經移動的文件并且常被包含在定位頭信息中指定新的地址信息。
400-499 用于指出客戶端的錯誤。400 1、語義有誤，當前請求無法被服務器理解。
401  當前請求需要用戶驗證 403 服務器已經理解請求，但是拒絕執行它。
500-599 用于支持服務器錯誤。 503 – 服務不可用

9、談一談let

與var的不同在于，用let聲明的變量只在 { } 內有效。這使得我們可以很方便的實現塊級作用域，不再使用立即實行函數。
{  
  let a=1;  
  var b=2;  
}  
console.log(a); //undefined  
console.log(b); //2  
let不會變量提升。也就是說，如果你使用var ，可以先使用變量再定義變量（注意：變量提升只提升聲明不提升賦值操作），但是如果你使用let定義變量則必須先定義后使用，否則會報錯。
console.log(a);//報錯：Uncaught ReferenceError: a is not defined  
console.log(b); //undefined  
let a=1;  
var b=2;  
暫時性死區（Temporal Dead Zone），只要塊級作用域內有let，let 聲明的變量不受全局同名變量的影響，如果想要在塊級作用域內使用let 聲明的變量，只能為其賦值。
var a=1;  
if(true){  
  a=2;  
  let a; //Uncaught ReferenceError: a is not defined  
}  
不允許在一個塊級作用域內重復聲明一個變量
不管是var與let重復聲明，還是let與let重復聲明，都會報錯。
為了方便大家看，把原文復制了一遍給大家看，懶得去自己敲栗子了！

10、promise的一個題
console.log("1");
    setTimeout(function() {
      console.log("2");
    }, 0);
    Promise.resolve().then(function() {
      console.log("3");
    }).then(function() {
      console.log("4");
    });
    console.log("5");
順序是：15342
console.log(1)

setTimeout(() => {
    console.log(2)
}, 0)

new Promise(resolve => {
    console.log(3)
    resolve()
}).then(() => {
    console.log(4)
})

console.log(5)
順序是：13542
這個題也比較簡單，注意一個是有new關鍵字的，另一個是直接在then方法中輸出的，小心這個陷阱就OK了！

11、簡單寫一下數組中求差集的方法
考過這道題之后，自己回來總結了一下數組中的求交集、差集、并集的方法，包括es5和es6兩種方式，大家可以去看看。

暫時先寫到這兒吧！最近手頭事兒比較多，還有面試，有經典的題再跟大家分享！
后續
持續更新
如果有更好的方法，請及時交流。
可加微信 YOYO_ZCC。
最近在面試，多多交流；
[...面試題]；