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

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

手寫代碼跟手敲代碼區(qū)別挺大的，手敲代碼能進(jìn)行調(diào)試，但是手寫代碼，會(huì)犯很多的低級(jí)錯(cuò)誤，因?yàn)槊撾x了IDE帶來(lái)的提示。不過(guò)手寫代碼是能夠看出面試者的思路的，大部分的面試官基本只是看看思路以及邏輯嚴(yán)謹(jǐn)性。

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

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

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

1、寫一個(gè)函數(shù)fn(10)，獲取0-100以內(nèi)的隨機(jī)數(shù)傳入一個(gè)數(shù)組，數(shù)組內(nèi)不能重復(fù)出現(xiàn)想同的數(shù)字，數(shù)組長(zhǎng)度為10(下面寫的代碼進(jìn)行了一部分改造原題）；

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、給定這么一個(gè)數(shù)據(jù)：
let data = [{
    id:1,
    name:"北京"
},{
    id:1,
    name:"天津",
    children:[{
        id:1,
        name:"西青"
    },{
        id:1,
        name:"和平",
        children:[{
            id:1,
            name:"和平一"
        },{
            id:1,
            name:"和平二"
        }]
    }]
}]
寫一個(gè)函數(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("請(qǐng)傳入數(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、給一個(gè)數(shù)組如下
const tree = [ "1", ["2", "3"], [4, ["5",6]]];
需要改造成
let new_tree = ["1", "2", "3", 4, "5", 6];
這道題面試的時(shí)候，一眼看過(guò)去真的會(huì)懵逼，反正我是懵逼了。不過(guò)只要懂一些iterator的知識(shí)，其實(shí)并不難；
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、說(shuō)一說(shuō)promise的實(shí)現(xiàn)原理
so，我也是比較懵逼的，只是會(huì)用而已，惡補(bǔ)了下這篇文章；

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

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

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

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



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

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

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

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

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

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

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

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


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

9、談一談let

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

10、promise的一個(gè)題
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
這個(gè)題也比較簡(jiǎn)單，注意一個(gè)是有new關(guān)鍵字的，另一個(gè)是直接在then方法中輸出的，小心這個(gè)陷阱就OK了！

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

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