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

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

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

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

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

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

1、寫一個函數(shù)fn(10)，獲取0-100以內(nèi)的隨機數(shù)傳入一個數(shù)組，數(shù)組內(nèi)不能重復(fù)出現(xiàn)想同的數(shù)字，數(shù)組長度為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、給定這么一個數(shù)據(jù)：
let data = [{
    id:1,
    name:"北京"
},{
    id:1,
    name:"天津",
    children:[{
        id:1,
        name:"西青"
    },{
        id:1,
        name:"和平",
        children:[{
            id:1,
            name:"和平一"
        },{
            id:1,
            name:"和平二"
        }]
    }]
}]
寫一個函數(shù)將數(shù)據(jù)內(nèi)的key值name和children相應(yīng)的替換成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("請傳入數(shù)組！")
    }
}

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、給一個數(shù)組如下
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的實現(xiàn)原理
so，我也是比較懵逼的，只是會用而已，惡補了下這篇文章；

5、js類型檢測的各種方法及其對比
轉(zhuǎn)移現(xiàn)場，看看這篇文章

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

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

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



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

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

beforeMount：在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用，也就是說，render函數(shù)此時會生成虛擬的dom節(jié)點，即vm.$el；

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

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

updated：由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁，在這之后會調(diào)用該鉤子。當這個鉤子被調(diào)用時，組件DOM已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循環(huán)。

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

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


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

9、談一談let

與var的不同在于，用let聲明的變量只在 { } 內(nèi)有效。這使得我們可以很方便的實現(xiàn)塊級作用域，不再使用立即實行函數(shù)。
{  
  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;  
暫時性死區(qū)（Temporal Dead Zone），只要塊級作用域內(nèi)有l(wèi)et，let 聲明的變量不受全局同名變量的影響，如果想要在塊級作用域內(nèi)使用let 聲明的變量，只能為其賦值。
var a=1;  
if(true){  
  a=2;  
  let a; //Uncaught ReferenceError: a is not defined  
}  
不允許在一個塊級作用域內(nèi)重復(fù)聲明一個變量
不管是var與let重復(fù)聲明，還是let與let重復(fù)聲明，都會報錯。
為了方便大家看，把原文復(fù)制了一遍給大家看，懶得去自己敲栗子了！

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關(guān)鍵字的，另一個是直接在then方法中輸出的，小心這個陷阱就OK了！

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

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