摘要：只能遍歷數(shù)組，不能中斷，返回值是修改后的數(shù)組。這在語法上，稱為暫時性死區(qū)。作用域鏈無論是還是查詢，都會在當(dāng)前的作用域開始查找，如果沒有找到，就會向上級作用域繼續(xù)查找目標(biāo)標(biāo)識符，每次上升一個作用域，一直到全局作用域為止。

互聯(lián)網(wǎng)寒冬之際，各大公司都縮減了HC，甚至是采取了“裁員”措施，在這樣的大環(huán)境之下，想要獲得一份更好的工作，必然需要付出更多的努力。

一年前，也許你搞清楚閉包，this，原型鏈，就能獲得認可。但是現(xiàn)在，很顯然是不行了。本文梳理出了一些面試中有一定難度的高頻原生JS問題，部分知識點可能你之前從未關(guān)注過，或者看到了，卻沒有仔細研究，但是它們卻非常重要。本文將以真實的面試題的形式來呈現(xiàn)知識點，大家在閱讀時，建議不要先看我的答案，而是自己先思考一番。盡管，本文所有的答案，都是我在翻閱各種資料，思考并驗證之后，才給出的(絕非復(fù)制粘貼而來)。但因水平有限，本人的答案未必是最優(yōu)的，如果您有更好的答案，歡迎給我留言。

本文篇幅較長，但是滿滿的都是干貨！并且還埋伏了可愛的表情包，希望小伙伴們能夠堅持讀完。

衷心的祝愿大家都能找到心儀的工作。

1. 原始類型有哪幾種？null 是對象嗎？原始數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型存儲有什么區(qū)別？

原始類型有6種，分別是undefined,null,bool,string,number,symbol(ES6新增)。

雖然 typeof null 返回的值是 object,但是null不是對象，而是基本數(shù)據(jù)類型的一種。

原始數(shù)據(jù)類型存儲在棧內(nèi)存，存儲的是值。

復(fù)雜數(shù)據(jù)類型存儲在堆內(nèi)存，存儲的是地址。當(dāng)我們把對象賦值給另外一個變量的時候，復(fù)制的是地址，指向同一塊內(nèi)存空間，當(dāng)其中一個對象改變時，另一個對象也會變化。

2. typeof 是否正確判斷類型? instanceof呢？ instanceof 的實現(xiàn)原理是什么？

首先 typeof 能夠正確的判斷基本數(shù)據(jù)類型，但是除了 null, typeof null輸出的是對象。

但是對象來說，typeof 不能正確的判斷其類型， typeof 一個函數(shù)可以輸出 "function",而除此之外，輸出的全是 object,這種情況下，我們無法準(zhǔn)確的知道對象的類型。

instanceof可以準(zhǔn)確的判斷復(fù)雜數(shù)據(jù)類型，但是不能正確判斷基本數(shù)據(jù)類型。(正確判斷數(shù)據(jù)類型請戳：https://github.com/YvetteLau/...

instanceof 是通過原型鏈判斷的，A instanceof B, 在A的原型鏈中層層查找，是否有原型等于B.prototype，如果一直找到A的原型鏈的頂端(null;即Object.prototype.__proto__),仍然不等于B.prototype，那么返回false，否則返回true.

instanceof的實現(xiàn)代碼:

// L instanceof R
function instance_of(L, R) {//L 表示左表達式，R 表示右表達式
    var O = R.prototype;// 取 R 的顯式原型
    L = L.__proto__;    // 取 L 的隱式原型
    while (true) { 
        if (L === null) //已經(jīng)找到頂層
            return false;  
        if (O === L)   //當(dāng) O 嚴(yán)格等于 L 時，返回 true
            return true; 
        L = L.__proto__;  //繼續(xù)向上一層原型鏈查找
    } 
}

3. for of , for in 和 forEach,map 的區(qū)別。

for...of循環(huán)：具有 iterator 接口，就可以用for...of循環(huán)遍歷它的成員(屬性值)。for...of循環(huán)可以使用的范圍包括數(shù)組、Set 和 Map 結(jié)構(gòu)、某些類似數(shù)組的對象、Generator 對象，以及字符串。for...of循環(huán)調(diào)用遍歷器接口，數(shù)組的遍歷器接口只返回具有數(shù)字索引的屬性。對于普通的對象，for...of結(jié)構(gòu)不能直接使用，會報錯，必須部署了 Iterator 接口后才能使用?？梢灾袛嘌h(huán)。

for...in循環(huán)：遍歷對象自身的和繼承的可枚舉的屬性, 不能直接獲取屬性值。可以中斷循環(huán)。

forEach: 只能遍歷數(shù)組，不能中斷，沒有返回值(或認為返回值是undefined)。

map: 只能遍歷數(shù)組，不能中斷，返回值是修改后的數(shù)組。

PS: Object.keys()：返回給定對象所有可枚舉屬性的字符串?dāng)?shù)組。

關(guān)于forEach是否會改變原數(shù)組的問題，有些小伙伴提出了異議，為此我寫了代碼測試了下(注意數(shù)組項是復(fù)雜數(shù)據(jù)類型的情況)。
除了forEach之外，map等API，也有同樣的問題。

let arry = [1, 2, 3, 4];

arry.forEach((item) => {
    item *= 10;
});
console.log(arry); //[1, 2, 3, 4]

arry.forEach((item) => {
    arry[1] = 10; //直接操作數(shù)組
});
console.log(arry); //[ 1, 10, 3, 4 ]

let arry2 = [
    { name: "Yve" },
    { age: 20 }
];
arry2.forEach((item) => {
    item.name = 10;
});
console.log(arry2);//[ { name: 10 }, { age: 20, name: 10 } ]

如還不了解 iterator 接口或 for...of, 請先閱讀ES6文檔: Iterator 和 for...of 循環(huán)

更多細節(jié)請戳: https://github.com/YvetteLau/...

4. 如何判斷一個變量是不是數(shù)組？

使用 Array.isArray 判斷，如果返回 true, 說明是數(shù)組

使用 instanceof Array 判斷，如果返回true, 說明是數(shù)組

使用 Object.prototype.toString.call 判斷，如果值是 [object Array], 說明是數(shù)組

通過 constructor 來判斷，如果是數(shù)組，那么 arr.constructor === Array. (不準(zhǔn)確，因為我們可以指定 obj.constructor = Array)

function fn() {
    console.log(Array.isArray(arguments));   //false; 因為arguments是類數(shù)組，但不是數(shù)組
    console.log(Array.isArray([1,2,3,4]));   //true
    console.log(arguments instanceof Array); //fasle
    console.log([1,2,3,4] instanceof Array); //true
    console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
    console.log(Object.prototype.toString.call([1,2,3,4])); //[object Array]
    console.log(arguments.constructor === Array); //false
    arguments.constructor = Array;
    console.log(arguments.constructor === Array); //true
    console.log(Array.isArray(arguments));        //false
}
fn(1,2,3,4);

5. 類數(shù)組和數(shù)組的區(qū)別是什么？

類數(shù)組:

1）擁有l(wèi)ength屬性，其它屬性（索引）為非負整數(shù)（對象中的索引會被當(dāng)做字符串來處理）;

2）不具有數(shù)組所具有的方法；

類數(shù)組是一個普通對象，而真實的數(shù)組是Array類型。

常見的類數(shù)組有: 函數(shù)的參數(shù) arugments, DOM 對象列表(比如通過 document.querySelectorAll 得到的列表), jQuery 對象 (比如 $("div")).

類數(shù)組可以轉(zhuǎn)換為數(shù)組:

//第一種方法
Array.prototype.slice.call(arrayLike, start);
//第二種方法
[...arrayLike];
//第三種方法:
Array.from(arrayLike);

PS: 任何定義了遍歷器（Iterator）接口的對象，都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組。

Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對象（array-like object）和可遍歷（iterable）的對象。

6. == 和 === 有什么區(qū)別？

=== 不需要進行類型轉(zhuǎn)換，只有類型相同并且值相等時，才返回 true.

== 如果兩者類型不同，首先需要進行類型轉(zhuǎn)換。具體流程如下:

首先判斷兩者類型是否相同，如果相等，判斷值是否相等.

如果類型不同，進行類型轉(zhuǎn)換

判斷比較的是否是 null 或者是 undefined, 如果是, 返回 true .

判斷兩者類型是否為 string 和 number, 如果是, 將字符串轉(zhuǎn)換成 number

判斷其中一方是否為 boolean, 如果是, 將 boolean 轉(zhuǎn)為 number 再進行判斷

判斷其中一方是否為 object 且另一方為 string、number 或者 symbol , 如果是, 將 object 轉(zhuǎn)為原始類型再進行判斷

let person1 = {
    age: 25
}
let person2 = person1;
person2.gae = 20;
console.log(person1 === person2); //true,注意復(fù)雜數(shù)據(jù)類型，比較的是引用地址

思考: [] == ![]

我們來分析一下: [] == ![] 是true還是false？

首先，我們需要知道 ! 優(yōu)先級是高于 == (更多運算符優(yōu)先級可查看: 運算符優(yōu)先級)

![] 引用類型轉(zhuǎn)換成布爾值都是true,因此![]的是false

根據(jù)上面的比較步驟中的第五條，其中一方是 boolean，將 boolean 轉(zhuǎn)為 number 再進行判斷，false轉(zhuǎn)換成 number，對應(yīng)的值是 0.

根據(jù)上面比較步驟中的第六條，有一方是 number，那么將object也轉(zhuǎn)換成Number,空數(shù)組轉(zhuǎn)換成數(shù)字，對應(yīng)的值是0.(空數(shù)組轉(zhuǎn)換成數(shù)字，對應(yīng)的值是0，如果數(shù)組中只有一個數(shù)字，那么轉(zhuǎn)成number就是這個數(shù)字，其它情況，均為NaN)

0 == 0; 為true

7. ES6中的class和ES5的類有什么區(qū)別？

ES6 class 內(nèi)部所有定義的方法都是不可枚舉的;

ES6 class 必須使用 new 調(diào)用;

ES6 class 不存在變量提升;

ES6 class 默認即是嚴(yán)格模式;

ES6 class 子類必須在父類的構(gòu)造函數(shù)中調(diào)用super()，這樣才有this對象;ES5中類繼承的關(guān)系是相反的，先有子類的this，然后用父類的方法應(yīng)用在this上。

8. 數(shù)組的哪些API會改變原數(shù)組？

修改原數(shù)組的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原數(shù)組的API有:

slice/map/forEach/every/filter/reduce/entries/find

注: 數(shù)組的每一項是簡單數(shù)據(jù)類型，且未直接操作數(shù)組的情況下。

9. let、const 以及 var 的區(qū)別是什么？

let 和 const 定義的變量不會出現(xiàn)變量提升，而 var 定義的變量會提升。

let 和 const 是JS中的塊級作用域

let 和 const 不允許重復(fù)聲明(會拋出錯誤)

let 和 const 定義的變量在定義語句之前，如果使用會拋出錯誤(形成了暫時性死區(qū))，而 var 不會。

const 聲明一個只讀的常量。一旦聲明，常量的值就不能改變(如果聲明是一個對象，那么不能改變的是對象的引用地址)

10. 在JS中什么是變量提升？什么是暫時性死區(qū)？

變量提升就是變量在聲明之前就可以使用，值為undefined。

在代碼塊內(nèi)，使用 let/const 命令聲明變量之前，該變量都是不可用的(會拋出錯誤)。這在語法上，稱為“暫時性死區(qū)”。暫時性死區(qū)也意味著 typeof 不再是一個百分百安全的操作。

typeof x; // ReferenceError(暫時性死區(qū)，拋錯)
let x;

typeof y; // 值是undefined,不會報錯

暫時性死區(qū)的本質(zhì)就是，只要一進入當(dāng)前作用域，所要使用的變量就已經(jīng)存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現(xiàn)，才可以獲取和使用該變量。

11. 如何正確的判斷this? 箭頭函數(shù)的this是什么？

this的綁定規(guī)則有四種：默認綁定，隱式綁定，顯式綁定，new綁定.

函數(shù)是否在 new 中調(diào)用(new綁定)，如果是，那么 this 綁定的是新創(chuàng)建的對象。

函數(shù)是否通過 call,apply 調(diào)用，或者使用了 bind (即硬綁定)，如果是，那么this綁定的就是指定的對象。

函數(shù)是否在某個上下文對象中調(diào)用(隱式綁定)，如果是的話，this 綁定的是那個上下文對象。一般是 obj.foo()

如果以上都不是，那么使用默認綁定。如果在嚴(yán)格模式下，則綁定到 undefined，否則綁定到全局對象。

如果把 null 或者 undefined 作為 this 的綁定對象傳入 call、apply 或者 bind, 這些值在調(diào)用時會被忽略，實際應(yīng)用的是默認綁定規(guī)則。

箭頭函數(shù)沒有自己的 this, 它的this繼承于上一層代碼塊的this。

測試下是否已經(jīng)成功Get了此知識點(瀏覽器執(zhí)行環(huán)境):

var number = 5;
var obj = {
    number: 3,
    fn1: (function () {
        var number;
        this.number *= 2;
        number = number * 2;
        number = 3;
        return function () {
            var num = this.number;
            this.number *= 2;
            console.log(num);
            number *= 3;
            console.log(number);
        }
    })()
}
var fn1 = obj.fn1;
fn1.call(null);
obj.fn1();
console.log(window.number);

如果this的知識點，您還不太懂，請戳: 嗨，你真的懂this嗎？

12. 詞法作用域和this的區(qū)別。

詞法作用域是由你在寫代碼時將變量和塊作用域?qū)懺谀睦飦頉Q定的

this 是在調(diào)用時被綁定的，this 指向什么，完全取決于函數(shù)的調(diào)用位置(關(guān)于this的指向問題，本文已經(jīng)有說明)

13. 談?wù)勀銓S執(zhí)行上下文棧和作用域鏈的理解。

執(zhí)行上下文就是當(dāng)前 JavaScript 代碼被解析和執(zhí)行時所在環(huán)境, JS執(zhí)行上下文?？梢哉J為是一個存儲函數(shù)調(diào)用的棧結(jié)構(gòu)，遵循先進后出的原則。

JavaScript執(zhí)行在單線程上，所有的代碼都是排隊執(zhí)行。

一開始瀏覽器執(zhí)行全局的代碼時，首先創(chuàng)建全局的執(zhí)行上下文，壓入執(zhí)行棧的頂部。

每當(dāng)進入一個函數(shù)的執(zhí)行就會創(chuàng)建函數(shù)的執(zhí)行上下文，并且把它壓入執(zhí)行棧的頂部。當(dāng)前函數(shù)執(zhí)行-完成后，當(dāng)前函數(shù)的執(zhí)行上下文出棧，并等待垃圾回收。

瀏覽器的JS執(zhí)行引擎總是訪問棧頂?shù)膱?zhí)行上下文。

全局上下文只有唯一的一個，它在瀏覽器關(guān)閉時出棧。

作用域鏈: 無論是 LHS 還是 RHS 查詢，都會在當(dāng)前的作用域開始查找，如果沒有找到，就會向上級作用域繼續(xù)查找目標(biāo)標(biāo)識符，每次上升一個作用域，一直到全局作用域為止。

題難不難？不難！繼續(xù)挑戰(zhàn)一下難！知道難，就更要繼續(xù)了！

閉包是指有權(quán)訪問另一個函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包最常用的方式就是在一個函數(shù)內(nèi)部創(chuàng)建另一個函數(shù)。

閉包的作用有:

封裝私有變量

模仿塊級作用域(ES5中沒有塊級作用域)

實現(xiàn)JS的模塊

15. call、apply有什么區(qū)別？call,aplly和bind的內(nèi)部是如何實現(xiàn)的？

call 和 apply 的功能相同，區(qū)別在于傳參的方式不一樣:

fn.call(obj, arg1, arg2, ...),調(diào)用一個函數(shù), 具有一個指定的this值和分別地提供的參數(shù)(參數(shù)的列表)。

fn.apply(obj, [argsArray]),調(diào)用一個函數(shù)，具有一個指定的this值，以及作為一個數(shù)組（或類數(shù)組對象）提供的參數(shù)。

call核心:

將函數(shù)設(shè)為傳入?yún)?shù)的屬性

指定this到函數(shù)并傳入給定參數(shù)執(zhí)行函數(shù)

如果不傳入?yún)?shù)或者參數(shù)為null，默認指向為 window / global

刪除參數(shù)上的函數(shù)

Function.prototype.call = function (context) {
    /** 如果第一個參數(shù)傳入的是 null 或者是 undefined, 那么指向this指向 window/global */
    /** 如果第一個參數(shù)傳入的不是null或者是undefined, 那么必須是一個對象 */
    if (!context) {
        //context為null或者是undefined
        context = typeof window === "undefined" ? global : window;
    }
    context.fn = this; //this指向的是當(dāng)前的函數(shù)(Function的實例)
    let args = [...arguments].slice(1);//獲取除了this指向?qū)ο笠酝獾膮?shù), 空數(shù)組slice后返回的仍然是空數(shù)組
    let result = context.fn(...args); //隱式綁定,當(dāng)前函數(shù)的this指向了context.
    delete context.fn;
    return result;
}

//測試代碼
var foo = {
    name: "Selina"
}
var name = "Chirs";
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.call(foo, "programmer", 20);
// Selina programmer 20
bar.call(null, "teacher", 25);
// 瀏覽器環(huán)境: Chirs teacher 25; node 環(huán)境: undefined teacher 25

apply:

apply的實現(xiàn)和call很類似，但是需要注意他們的參數(shù)是不一樣的，apply的第二個參數(shù)是數(shù)組或類數(shù)組.

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context為null或者是undefined時,設(shè)置默認值
        context = typeof window === "undefined" ? global : window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或者 是 null 不是 Iterator 對象，不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === "object") {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}
var foo = {
    name: "Selina"
}
var name = "Chirs";
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.apply(foo, ["programmer", 20]);
// Selina programmer 20
bar.apply(null, ["teacher", 25]);
// 瀏覽器環(huán)境: Chirs programmer 20; node 環(huán)境: undefined teacher 25

bind

bind 和 call/apply 有一個很重要的區(qū)別，一個函數(shù)被 call/apply 的時候，會直接調(diào)用，但是 bind 會創(chuàng)建一個新函數(shù)。當(dāng)這個新函數(shù)被調(diào)用時，bind() 的第一個參數(shù)將作為它運行時的 this，之后的一序列參數(shù)將會在傳遞的實參前傳入作為它的參數(shù)。

Function.prototype.my_bind = function(context) {
    if(typeof this !== "function"){
        throw new TypeError("not a function");
    }
    let self = this;
    let args = [...arguments].slice(1);
    function Fn() {};
    Fn.prototype = this.prototype;
    let bound = function() {
        let res = [...args, ...arguments]; //bind傳遞的參數(shù)和函數(shù)調(diào)用時傳遞的參數(shù)拼接
        context = this instanceof Fn ? this : context || this;
        return self.apply(context, res);
    }
    //原型鏈
    bound.prototype = new Fn();
    return bound;
}

var name = "Jack";
function person(age, job, gender){
    console.log(this.name , age, job, gender);
}
var Yve = {name : "Yvette"};
let result = person.my_bind(Yve, 22, "enginner")("female");    

16. new的原理是什么？通過new的方式創(chuàng)建對象和通過字面量創(chuàng)建有什么區(qū)別？

new:

創(chuàng)建一個新對象。

這個新對象會被執(zhí)行[[原型]]連接。

將構(gòu)造函數(shù)的作用域賦值給新對象，即this指向這個新對象.

如果函數(shù)沒有返回其他對象，那么new表達式中的函數(shù)調(diào)用會自動返回這個新對象。

function new(func) {
    lat target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

字面量創(chuàng)建對象，不會調(diào)用 Object構(gòu)造函數(shù), 簡潔且性能更好;

new Object() 方式創(chuàng)建對象本質(zhì)上是方法調(diào)用，涉及到在proto鏈中遍歷該方法，當(dāng)找到該方法后，又會生產(chǎn)方法調(diào)用必須的 堆棧信息，方法調(diào)用結(jié)束后，還要釋放該堆棧，性能不如字面量的方式。

通過對象字面量定義對象時，不會調(diào)用Object構(gòu)造函數(shù)。

17. 談?wù)勀銓υ偷睦斫猓?/b>

18. 什么是原型鏈？【原型鏈解決的是什么問題？】

19. prototype 和 __proto__ 區(qū)別是什么？

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student("jack");
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

20. 使用ES5實現(xiàn)一個繼承？

組合繼承(最常用的繼承方式)

function SuperType() {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
    console.log(this.name);
}

function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
    console.log(this.age);
}

21. 什么是深拷貝？深拷貝和淺拷貝有什么區(qū)別？

function deepClone(obj) { //遞歸拷貝
    if(obj === null) return null; //null 的情況
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(typeof obj !== "object") {
        //如果不是復(fù)雜數(shù)據(jù)類型，直接返回
        return obj;
    }
    /**
     * 如果obj是數(shù)組，那么 obj.constructor 是 [Function: Array]
     * 如果obj是對象，那么 obj.constructor 是 [Function: Object]
     */
    let t = new obj.constructor();
    for(let key in obj) {
        //如果 obj[key] 是復(fù)雜數(shù)據(jù)類型，遞歸
        t[key] = deepClone(obj[key]);
    }
    return t;
}

防抖(debounce): n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計算時間

function debounce(func, wait, immediate=true) {
    let timeout, context, args;
        // 延遲執(zhí)行函數(shù)
        const later = () => setTimeout(() => {
            // 延遲函數(shù)執(zhí)行完畢，清空定時器
            timeout = null
            // 延遲執(zhí)行的情況下，函數(shù)會在延遲函數(shù)中執(zhí)行
            // 使用到之前緩存的參數(shù)和上下文
            if (!immediate) {
                func.apply(context, args);
                context = args = null;
            }
        }, wait);
        let debounced = function (...params) {
            if (!timeout) {
                timeout = later();
                if (immediate) {
                    //立即執(zhí)行
                    func.apply(this, params);
                } else {
                    //閉包
                    context = this;
                    args = params;
                }
            } else {
                clearTimeout(timeout);
                timeout = later();
            }
        }
    debounced.cancel = function () {
        clearTimeout(timeout);
        timeout = null;
    };
    return debounced;
};

節(jié)流(throttle): 高頻事件在規(guī)定時間內(nèi)只會執(zhí)行一次，執(zhí)行一次后，只有大于設(shè)定的執(zhí)行周期后才會執(zhí)行第二次。

//underscore.js
function throttle(func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function () {
        previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // 判斷是否設(shè)置了定時器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
};

23. 取數(shù)組的最大值（ES5、ES6）

// ES5 的寫法
Math.max.apply(null, [14, 3, 77, 30]);

// ES6 的寫法
Math.max(...[14, 3, 77, 30]);

// reduce
[14,3,77,30].reduce((accumulator, currentValue)=>{
    return accumulator = accumulator > currentValue ? accumulator : currentValue
});

24. ES6新的特性有哪些？

25. setTimeout倒計時為什么會出現(xiàn)誤差？

26. 為什么 0.1 + 0.2 != 0.3 ?

0.1 -> 0.0001100110011001...(無限循環(huán))
0.2 -> 0.0011001100110011...(無限循環(huán))

27. promise 有幾種狀態(tài), Promise 有什么優(yōu)缺點 ?

Promise 的優(yōu)點:

Promise 的缺點:

28. Promise構(gòu)造函數(shù)是同步還是異步執(zhí)行，then中的方法呢 ?promise如何實現(xiàn)then處理 ?

29. Promise和setTimeout的區(qū)別 ?

30. 如何實現(xiàn) Promise.all ?

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            setTimeout(() => {
                function processValue(i, data) {
                    result[i] = data;
                    if (++index === promises.length) {
                        resolve(result);
                    }
                }
                for (let i = 0; i < promises.length; i++) {
                    //promises[i] 可能是普通值
                    Promise.resolve(promises[i]).then((data) => {
                        processValue(i, data);
                    }, (err) => {
                        reject(err);
                        return;
                    });
                }
            })
        }
    });
}

31.如何實現(xiàn) Promise.finally ?

Promise.prototype.finally = function (callback) {
    return this.then((value) => {
        return Promise.resolve(callback()).then(() => {
            return value;
        });
    }, (err) => {
        return Promise.resolve(callback()).then(() => {
            throw err;
        });
    });
}

32. 什么是函數(shù)柯里化？實現(xiàn) sum(1)(2)(3) 返回結(jié)果是1,2,3之和

function sum(a) {
    return function(b) {
        return function(c) {
            return a+b+c;
        }
    }
}
console.log(sum(1)(2)(3)); // 6

function curry(fn, args = []) {
    return function(){
        let rest = [...args, ...arguments];
        if (rest.length < fn.length) {
            return curry.call(this,fn,rest);
        }else{
            return fn.apply(this,rest);
        }
    }
}
//test
function sum(a,b,c) {
    return a+b+c;
}
let sumFn = curry(sum);
console.log(sumFn(1)(2)(3)); //6
console.log(sumFn(1)(2, 3)); //6

后續(xù)寫作計劃

參考文章:

關(guān)注小姐姐的公眾號，和小姐姐一起學(xué)前端。