【面試篇】寒冬求職季之你必需要懂的原生JS(上)

時間 2019-11-05

原文原文鏈接

互聯網寒冬之際，各大公司都縮減了HC，甚至是採起了「裁人」措施，在這樣的大環境之下，想要得到一份更好的工做，必然須要付出更多的努力。

一年前，也許你搞清楚閉包，this，原型鏈，就能得到承認。可是如今，很顯然是不行了。本文梳理出了一些面試中有必定難度的高頻原生JS問題，部分知識點可能你以前從未關注過，或者看到了，卻沒有仔細研究，可是它們卻很是重要。javascript

本文將以真實的面試題的形式來呈現知識點，你們在閱讀時，建議不要先看個人答案，而是本身先思考一番。儘管，本文全部的答案，都是我在翻閱各類資料，思考並驗證以後，纔給出的(絕非複製粘貼而來)。但因水平有限，本人的答案未必是最優的，若是您有更好的答案，歡迎給我留言。html

本文篇幅較長，可是滿滿的都是乾貨！而且還埋伏了可愛的表情包，但願小夥伴們可以堅持讀完。前端

衷心的祝願你們都能找到心儀的工做。java

更多文章可戳: github.com/YvetteLau/B…node

1. 基本類型有哪幾種？null 是對象嗎？基本數據類型和複雜數據類型存儲有什麼區別？

基本類型有6種，分別是undefined,null,bool,string,number,symbol(ES6新增)。
雖然 typeof null 返回的值是 object,可是null不是對象，而是基本數據類型的一種。
基本數據類型存儲在棧內存，存儲的是值。
複雜數據類型的值存儲在堆內存，地址（指向堆中的值）存儲在棧內存。當咱們把對象賦值給另一個變量的時候，複製的是地址，指向同一塊內存空間，當其中一個對象改變時，另外一個對象也會變化。

2. typeof 是否正確判斷類型? instanceof呢？ instanceof 的實現原理是什麼？

首先 typeof 可以正確的判斷基本數據類型，可是除了 null, typeof null輸出的是對象。git

可是對象來講，typeof 不能正確的判斷其類型， typeof 一個函數能夠輸出 'function',而除此以外，輸出的全是 object,這種狀況下，咱們沒法準確的知道對象的類型。es6

instanceof能夠準確的判斷複雜數據類型，可是不能正確判斷基本數據類型。(正確判斷數據類型請戳：github.com/YvetteLau/B…)github

instanceof 是經過原型鏈判斷的，A instanceof B, 在A的原型鏈中層層查找，是否有原型等於B.prototype，若是一直找到A的原型鏈的頂端(null;即Object.proptotype.__proto__),仍然不等於B.prototype，那麼返回false，不然返回true.web

instanceof的實現代碼:面試

// L instanceof R
function instance_of(L, R) {//L 表示左表達式，R 表示右表達式
    var O = R.prototype;// 取 R 的顯式原型
    L = L.__proto__;    // 取 L 的隱式原型
    while (true) { 
        if (L === null) //已經找到頂層
            return false;  
        if (O === L)   //當 O 嚴格等於 L 時，返回 true
            return true; 
        L = L.__proto__;  //繼續向上一層原型鏈查找
    } 
}
複製代碼

3. for of , for in 和 forEach,map 的區別。

for...of循環：具備 iterator 接口，就能夠用for...of循環遍歷它的成員(屬性值)。for...of循環可使用的範圍包括數組、Set 和 Map 結構、某些相似數組的對象、Generator 對象，以及字符串。for...of循環調用遍歷器接口，數組的遍歷器接口只返回具備數字索引的屬性。對於普通的對象，for...of結構不能直接使用，會報錯，必須部署了 Iterator 接口後才能使用。能夠中斷循環。
for...in循環：遍歷對象自身的和繼承的可枚舉的屬性, 不能直接獲取屬性值。能夠中斷循環。
forEach: 只能遍歷數組，不能中斷，沒有返回值(或認爲返回值是undefined)。
map: 只能遍歷數組，不能中斷，返回值是修改後的數組。

PS: Object.keys()：返回給定對象全部可枚舉屬性的字符串數組。

關於forEach是否會改變原數組的問題，有些小夥伴提出了異議，爲此我寫了代碼測試了下(注意數組項是複雜數據類型的狀況)。除了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; //直接操做數組
});
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 循環

更多細節請戳: github.com/YvetteLau/B…

4. 如何判斷一個變量是否是數組？

使用 Array.isArray 判斷，若是返回 true, 說明是數組
使用 instanceof Array 判斷，若是返回true, 說明是數組
使用 Object.prototype.toString.call 判斷，若是值是 [object Array], 說明是數組
經過 constructor 來判斷，若是是數組，那麼 arr.constructor === Array. (不許確，由於咱們能夠指定 obj.constructor = Array)

function fn() {
    console.log(Array.isArray(arguments));   //false; 由於arguments是類數組，但不是數組
    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. 類數組和數組的區別是什麼？

類數組:

1）擁有length屬性，其它屬性（索引）爲非負整數（對象中的索引會被當作字符串來處理）;

2）不具備數組所具備的方法；

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

常見的類數組有: 函數的參數 arguments, DOM 對象列表(好比經過 document.querySelectorAll 獲得的列表), jQuery 對象 (好比 $("div")).

類數組能夠轉換爲數組:

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

PS: 任何定義了遍歷器（Iterator）接口的對象，均可以用擴展運算符轉爲真正的數組。

Array.from方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象。

6. == 和 === 有什麼區別？

=== 不須要進行類型轉換，只有類型相同而且值相等時，才返回 true.

== 若是二者類型不一樣，首先須要進行類型轉換。具體流程以下:

首先判斷二者類型是否相同，若是相等，判斷值是否相等.
若是類型不一樣，進行類型轉換
判斷比較的是不是 null 或者是 undefined, 若是是, 返回 true .
判斷二者類型是否爲 string 和 number, 若是是, 將字符串轉換成 number
判斷其中一方是否爲 boolean, 若是是, 將 boolean 轉爲 number 再進行判斷
判斷其中一方是否爲 object 且另外一方爲 string、number 或者 symbol , 若是是, 將 object 轉爲原始類型再進行判斷

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

思考: `[] == ![]`

咱們來分析一下: [] == ![] 是true仍是false？

首先，咱們須要知道 ! 優先級是高於 == (更多運算符優先級可查看: 運算符優先級)
![] 引用類型轉換成布爾值都是true,所以![]的是false
根據上面的比較步驟中的第五條，其中一方是 boolean，將 boolean 轉爲 number 再進行判斷，false轉換成 number，對應的值是 0.
根據上面比較步驟中的第六條，有一方是 number，那麼將object也轉換成Number,空數組轉換成數字，對應的值是0.(空數組轉換成數字，對應的值是0，若是數組中只有一個數字，那麼轉成number就是這個數字，其它狀況，均爲NaN)
0 == 0; 爲true

7. ES6中的class和ES5的類有什麼區別？

ES6 class 內部全部定義的方法都是不可枚舉的;
ES6 class 必須使用 new 調用;
ES6 class 不存在變量提高;
ES6 class 默認便是嚴格模式;
ES6 class 子類必須在父類的構造函數中調用super()，這樣纔有this對象;ES5中類繼承的關係是相反的，先有子類的this，而後用父類的方法應用在this上。

8. 數組的哪些API會改變原數組？

修改原數組的API有:

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

不修改原數組的API有:

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

注: 數組的每一項是簡單數據類型，且未直接操做數組的狀況下(稍後會對此題從新做答)。

9. let、const 以及 var 的區別是什麼？

let 和 const 定義的變量不會出現變量提高，而 var 定義的變量會提高。
let 和 const 是JS中的塊級做用域
let 和 const 不容許重複聲明(會拋出錯誤)
let 和 const 定義的變量在定義語句以前，若是使用會拋出錯誤(造成了暫時性死區)，而 var 不會。
const 聲明一個只讀的常量。一旦聲明，常量的值就不能改變(若是聲明是一個對象，那麼不能改變的是對象的引用地址)

10. 在JS中什麼是變量提高？什麼是暫時性死區？

變量提高就是變量在聲明以前就可使用，值爲undefined。

在代碼塊內，使用 let/const 命令聲明變量以前，該變量都是不可用的(會拋出錯誤)。這在語法上，稱爲「暫時性死區」。暫時性死區也意味着 typeof 再也不是一個百分百安全的操做。

typeof x; // ReferenceError(暫時性死區，拋錯)
let x;
複製代碼

typeof y; // 值是undefined,不會報錯
複製代碼

暫時性死區的本質就是，只要一進入當前做用域，所要使用的變量就已經存在了，可是不可獲取，只有等到聲明變量的那一行代碼出現，才能夠獲取和使用該變量。

11. 如何正確的判斷this? 箭頭函數的this是什麼？

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

函數是否在 new 中調用(new綁定)，若是是，那麼 this 綁定的是新建立的對象【前提是構造函數中沒有返回對象或者是function，不然this指向返回的對象/function】。
函數是否經過 call,apply 調用，或者使用了 bind (即硬綁定)，若是是，那麼this綁定的就是指定的對象。
函數是否在某個上下文對象中調用(隱式綁定)，若是是的話，this 綁定的是那個上下文對象。通常是 obj.foo()
若是以上都不是，那麼使用默認綁定。若是在嚴格模式下，則綁定到 undefined，不然綁定到全局對象。
若是把 null 或者 undefined 做爲 this 的綁定對象傳入 call、apply 或者 bind, 這些值在調用時會被忽略，實際應用的是默認綁定規則。
箭頭函數沒有本身的 this, 它的this繼承於上一層代碼塊的this。

測試下是否已經成功Get了此知識點(瀏覽器執行環境):

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的區別。

詞法做用域是由你在寫代碼時將變量和塊做用域寫在哪裏來決定的
this 是在調用時被綁定的，this 指向什麼，徹底取決於函數的調用位置(關於this的指向問題，本文已經有說明)

13. 談談你對JS執行上下文棧和做用域鏈的理解。

執行上下文就是當前 JavaScript 代碼被解析和執行時所在環境, JS執行上下文棧能夠認爲是一個存儲函數調用的棧結構，遵循先進後出的原則。

JavaScript執行在單線程上，全部的代碼都是排隊執行。
一開始瀏覽器執行全局的代碼時，首先建立全局的執行上下文，壓入執行棧的頂部。
每當進入一個函數的執行就會建立函數的執行上下文，而且把它壓入執行棧的頂部。當前函數執行-完成後，當前函數的執行上下文出棧，並等待垃圾回收。
瀏覽器的JS執行引擎老是訪問棧頂的執行上下文。
全局上下文只有惟一的一個，它在瀏覽器關閉時出棧。

做用域鏈: 不管是 LHS 仍是 RHS 查詢，都會在當前的做用域開始查找，若是沒有找到，就會向上級做用域繼續查找目標標識符，每次上升一個做用域，一直到全局做用域爲止。

題難不難？不難！繼續挑戰一下！難！知道難，就更要繼續了！

14. 什麼是閉包？閉包的做用是什麼？閉包有哪些使用場景？

閉包是指有權訪問另外一個函數做用域中的變量的函數，建立閉包最經常使用的方式就是在一個函數內部建立另外一個函數。

閉包的做用有:

封裝私有變量
模仿塊級做用域(ES5中沒有塊級做用域)
實現JS的模塊

15. call、apply有什麼區別？call,aplly和bind的內部是如何實現的？

call 和 apply 的功能相同，區別在於傳參的方式不同:

fn.call(obj, arg1, arg2, ...),調用一個函數, 具備一個指定的this值和分別地提供的參數(參數的列表)。
fn.apply(obj, [argsArray]),調用一個函數，具備一個指定的this值，以及做爲一個數組（或類數組對象）提供的參數。

call核心:

將函數設爲傳入參數的屬性
指定this到函數並傳入給定參數執行函數
若是不傳入參數或者參數爲null，默認指向爲 window / global
刪除參數上的函數

Function.prototype.call = function (context) {
    /** 若是第一個參數傳入的是 null 或者是 undefined, 那麼指向this指向 window/global */
    /** 若是第一個參數傳入的不是null或者是undefined, 那麼必須是一個對象 */
    if (!context) {
        //context爲null或者是undefined
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this; //this指向的是當前的函數(Function的實例)
    let rest = [...arguments].slice(1);//獲取除了this指向對象之外的參數, 空數組slice後返回的仍然是空數組
    let result = context.fn(...rest); //隱式綁定,當前函數的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);
// 瀏覽器環境: Chirs teacher 25; node 環境: undefined teacher 25

複製代碼

apply:

apply的實現和call很相似，可是須要注意他們的參數是不同的，apply的第二個參數是數組或類數組.

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context爲null或者是undefined時,設置默認值
        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]);
// 瀏覽器環境: Chirs programmer 20; node 環境: undefined teacher 25
複製代碼

bind

bind 和 call/apply 有一個很重要的區別，一個函數被 call/apply 的時候，會直接調用，可是 bind 會建立一個新函數。當這個新函數被調用時，bind() 的第一個參數將做爲它運行時的 this，以後的一序列參數將會在傳遞的實參前傳入做爲它的參數。

Function.prototype.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傳遞的參數和函數調用時傳遞的參數拼接
        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.bind(Yve, 22, 'enginner')('female');	
複製代碼

16. new的原理是什麼？經過new的方式建立對象和經過字面量建立有什麼區別？

new:

建立一個新對象。
這個新對象會被執行[[原型]]鏈接。
屬性和方法被加入到 this 引用的對象中。並執行了構造函數中的方法.
若是函數沒有返回其餘對象，那麼this指向這個新對象，不然this指向構造函數中返回的對象。

function new(func) {
    let target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (res && typeof(res) == "object" || typeof(res) == "function") {
    	return res;
    }
    return target;
}
複製代碼

字面量建立對象，不會調用 Object構造函數, 簡潔且性能更好;

new Object() 方式建立對象本質上是方法調用，涉及到在proto鏈中遍歷該方法，當找到該方法後，又會生產方法調用必須的堆棧信息，方法調用結束後，還要釋放該堆棧，性能不如字面量的方式。

經過對象字面量定義對象時，不會調用Object構造函數。

17. 談談你對原型的理解？

在 JavaScript 中，每當定義一個對象（函數也是對象）時候，對象中都會包含一些預約義的屬性。其中每一個函數對象都有一個prototype 屬性，這個屬性指向函數的原型對象。使用原型對象的好處是全部對象實例共享它所包含的屬性和方法。

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

原型鏈解決的主要是繼承問題。

每一個對象擁有一個原型對象，經過 __proto__ (讀音: dunder proto) 指針指向其原型對象，並從中繼承方法和屬性，同時原型對象也可能擁有原型，這樣一層一層，最終指向 null(Object.prototype.__proto__ 指向的是null)。這種關係被稱爲原型鏈 (prototype chain)，經過原型鏈一個對象能夠擁有定義在其餘對象中的屬性和方法。

構造函數 Parent、Parent.prototype 和實例 p 的關係以下:(p.__proto__ === Parent.prototype)

19. prototype 和 `proto` 區別是什麼？

prototype是構造函數的屬性。

__proto__ 是每一個實例都有的屬性，能夠訪問 [[prototype]] 屬性。

實例的__proto__ 與其構造函數的prototype指向的是同一個對象。

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實現一個繼承？

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

function SuperType(name) {
    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);
}
複製代碼

其它繼承方式實現，能夠參考《JavaScript高級程序設計》

21. 什麼是深拷貝？深拷貝和淺拷貝有什麼區別？

淺拷貝是指只複製第一層對象，可是當對象的屬性是引用類型時，實質複製的是其引用，當引用指向的值改變時也會跟着變化。

深拷貝複製變量值，對於非基本類型的變量，則遞歸至基本類型變量後，再複製。深拷貝後的對象與原來的對象是徹底隔離的，互不影響，對一個對象的修改並不會影響另外一個對象。

實現一個深拷貝:

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') {
        //若是不是複雜數據類型，直接返回
        return obj;
    }
    /** * 若是obj是數組，那麼 obj.constructor 是 [Function: Array] * 若是obj是對象，那麼 obj.constructor 是 [Function: Object] */
    let t = new obj.constructor();
    for(let key in obj) {
        //若是 obj[key] 是複雜數據類型，遞歸
        t[key] = deepClone(obj[key]);
    }
    return t;
}
複製代碼

看不下去了？別人的送分題會成爲你的送命題

22. 防抖和節流的區別是什麼？防抖和節流的實現。

防抖和節流的做用都是防止函數屢次調用。區別在於，假設一個用戶一直觸發這個函數，且每次觸發函數的間隔小於設置的時間，防抖的狀況下只會調用一次，而節流的狀況會每隔必定時間調用一次函數。

防抖(debounce): n秒內函數只會執行一次，若是n秒內高頻事件再次被觸發，則從新計算時間

function debounce(func, wait, immediate = true) {
    let timer;
    // 延遲執行函數
    const later = (context, args) => setTimeout(() => {
        timer = null;// 倒計時結束
        if (!immediate) {
            func.apply(context, args);
            //執行回調
            context = args = null;
        }
    }, wait);
    let debounced = function (...params) {
        let context = this;
        let args = params;
        if (!timer) {
            timer = later(context, args);
            if (immediate) {
                //當即執行
                func.apply(context, args);
            }
        } else {
            clearTimeout(timer);
            //函數在每一個等待時延的結束被調用
            timer = later(context, args);
        }
    }
    debounced.cancel = function () {
        clearTimeout(timer);
        timer = null;
    };
    return debounced;
};
複製代碼

防抖的應用場景:

每次 resize/scroll 觸發統計事件
文本輸入的驗證（連續輸入文字後發送 AJAX 請求進行驗證，驗證一次就好）

節流(throttle): 高頻事件在規定時間內只會執行一次，執行一次後，只有大於設定的執行週期後纔會執行第二次。

//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) {
            // 判斷是否設置了定時器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

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

    return throttled;
};

複製代碼

函數節流的應用場景有:

DOM 元素的拖拽功能實現（mousemove）
射擊遊戲的 mousedown/keydown 事件（單位時間只能發射一顆子彈）
計算鼠標移動的距離（mousemove）
Canvas 模擬畫板功能（mousemove）
搜索聯想（keyup）
監聽滾動事件判斷是否到頁面底部自動加載更多：給 scroll 加了 debounce 後，只有用戶中止滾動後，纔會判斷是否到了頁面底部；若是是 throttle 的話，只要頁面滾動就會間隔一段時間判斷一次

23. 取數組的最大值（ES五、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新的特性有哪些？

新增了塊級做用域(let,const)
提供了定義類的語法糖(class)
新增了一種基本數據類型(Symbol)
新增了變量的解構賦值
函數參數容許設置默認值，引入了rest參數，新增了箭頭函數
數組新增了一些API，如 isArray / from / of 方法;數組實例新增了 entries()，keys() 和 values() 等方法
對象和數組新增了擴展運算符
ES6 新增了模塊化(import/export)
ES6 新增了 Set 和 Map 數據結構
ES6 原生提供 Proxy 構造函數，用來生成 Proxy 實例
ES6 新增了生成器(Generator)和遍歷器(Iterator)

25. setTimeout倒計時爲何會出現偏差？

setTimeout() 只是將事件插入了「任務隊列」，必須等當前代碼（執行棧）執行完，主線程纔會去執行它指定的回調函數。要是當前代碼消耗時間很長，也有可能要等好久，因此並沒辦法保證回調函數必定會在 setTimeout() 指定的時間執行。因此， setTimeout() 的第二個參數表示的是最少時間，並不是是確切時間。

HTML5標準規定了 setTimeout() 的第二個參數的最小值不得小於4毫秒，若是低於這個值，則默認是4毫秒。在此以前。老版本的瀏覽器都將最短期設爲10毫秒。另外，對於那些DOM的變更（尤爲是涉及頁面從新渲染的部分），一般是間隔16毫秒執行。這時使用 requestAnimationFrame() 的效果要好於 setTimeout();

26. 爲何 0.1 + 0.2 != 0.3 ?

0.1 + 0.2 != 0.3 是由於在進制轉換和進階運算的過程當中出現精度損失。

下面是詳細解釋:

JavaScript使用 Number 類型表示數字(整數和浮點數)，使用64位表示一個數字。

圖片說明:

第0位：符號位，0表示正數，1表示負數(s)
第1位到第11位：儲存指數部分（e）
第12位到第63位：儲存小數部分（即有效數字）f

計算機沒法直接對十進制的數字進行運算, 須要先對照 IEEE 754 規範轉換成二進制，而後對階運算。

1.進制轉換

0.1和0.2轉換成二進制後會無限循環

0.1 -> 0.0001100110011001...(無限循環)
0.2 -> 0.0011001100110011...(無限循環)
複製代碼

可是因爲IEEE 754尾數位數限制，須要將後面多餘的位截掉，這樣在進制之間的轉換中精度已經損失。

2.對階運算

因爲指數位數不相同，運算時須要對階運算這部分也可能產生精度損失。

按照上面兩步運算（包括兩步的精度損失），最後的結果是

0.0100110011001100110011001100110011001100110011001100

結果轉換成十進制以後就是 0.30000000000000004。

27. promise 有幾種狀態, Promise 有什麼優缺點 ?

promise有三種狀態: fulfilled, rejected, pending.

Promise 的優勢:

一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果
能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數

Promise 的缺點:

沒法取消 Promise
當處於pending狀態時，沒法得知目前進展到哪個階段

28. Promise構造函數是同步仍是異步執行，then中的方法呢 ?promise如何實現then處理 ?

Promise的構造函數是同步執行的。then 中的方法是異步執行的。

promise的then實現，詳見: Promise源碼實現

29. Promise和setTimeout的區別 ?

Promise 是微任務，setTimeout 是宏任務，同一個事件循環中，promise.then老是先於 setTimeout 執行。

30. 如何實現 Promise.all ?

要實現 Promise.all,首先咱們須要知道 Promise.all 的功能：

若是傳入的參數是一個空的可迭代對象，那麼此promise對象回調完成(resolve),只有此狀況，是同步執行的，其它都是異步返回的。
若是傳入的參數不包含任何 promise，則返回一個異步完成. promises 中全部的promise都「完成」時或參數中不包含 promise 時回調完成。
若是參數中有一個promise失敗，那麼Promise.all返回的promise對象失敗
在任何狀況下，Promise.all 返回的 promise 的完成狀態的結果都是一個數組

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let index = 0;
        let result = [];
        if (promises.length === 0) {
            resolve(result);
        } else {
            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;
                });
            }
        }
    });
}
複製代碼

若是想了解更多Promise的源碼實現，能夠參考個人另外一篇文章：Promise的源碼實現（完美符合Promise/A+規範）

31.如何實現 Promise.finally ?

無論成功仍是失敗，都會走到finally中,而且finally以後，還能夠繼續then。而且會將值原封不動的傳遞給後面的then.

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. 什麼是函數柯里化？實現 sum(1)(2)(3) 返回結果是1,2,3之和

函數柯里化是把接受多個參數的函數變換成接受一個單一參數（最初函數的第一個參數）的函數，而且返回接受餘下的參數並且返回結果的新函數的技術。

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

引伸：實現一個curry函數，將普通函數進行柯里化:

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
複製代碼