摘要：常用知識(shí)總結(jié)之前總結(jié)了中的一些知識(shí)點(diǎn)。在年正式發(fā)布了，簡(jiǎn)稱(chēng)，又稱(chēng)為。作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有屬性和屬性，因此同時(shí)存在兩條繼承鏈。子類(lèi)的屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類(lèi)。

之前總結(jié)了es5中js的一些知識(shí)點(diǎn)。這段時(shí)間看了石川blue老師講解的es6課程，結(jié)合阮一峰老師的es6教程，隨手做了一些筆記和總結(jié)分享給大家。內(nèi)容還是es6主要的知識(shí)點(diǎn)，基本沒(méi)有什么創(chuàng)新點(diǎn)，主要是石川blue對(duì)里面一些難懂的知識(shí)點(diǎn)分析的挺好的，對(duì)我個(gè)人理解es6很有幫助，也希望對(duì)大家能有所幫助。

石川blue老師es6講解視頻百度云地址：https://pan.baidu.com/s/1qZpUeni 密碼：2m9t

首先弄明白ECMA和js的關(guān)系。ECMA是標(biāo)準(zhǔn)，Javascript是ECMA的實(shí)現(xiàn)。因?yàn)閖s也是一種語(yǔ)言，但凡語(yǔ)言都有一套標(biāo)準(zhǔn)，而ECMA就是javascript的標(biāo)準(zhǔn)。
在2015年正式發(fā)布了ECMAscript6.0，簡(jiǎn)稱(chēng)ES6，又稱(chēng)為ECMAscript2015。

在es6之前，定義變量都是使用var，但是var存在一些問(wèn)題，比如可以重復(fù)聲明，僅支持函數(shù)作用域問(wèn)題。所以es6設(shè)計(jì)了let和const來(lái)彌補(bǔ)不足的地方，下面看一下let和const具備哪些特性

let

不能重復(fù)聲明

塊級(jí)作用域

可修改let變量的值

const

不可重復(fù)聲明

塊級(jí)作用域

不可修改const變量的值

箭頭函數(shù)在寫(xiě)法上對(duì)es5做了一些修整，代碼看起來(lái)更顯得簡(jiǎn)潔

如果只有一個(gè)參數(shù)，圓括號(hào)"()"可以省略

函數(shù)體如果只有一句return語(yǔ)句，花括號(hào)也可以省略

// 定義一個(gè)箭頭函數(shù)
let a = (arg)=>{ //  這里=>符號(hào)就相當(dāng)于function關(guān)鍵字
    return arg+=1
}
// 也可以簡(jiǎn)寫(xiě)為
let a = arg => arg+=1

箭頭函數(shù)也對(duì)this的指向做了修整
es6之前的函數(shù)的this指向調(diào)用函數(shù)時(shí)所在的對(duì)象，而箭頭函數(shù)的this指向函數(shù)定義時(shí)所在的對(duì)象

// 普通函數(shù)
 var obj = {
   say: function () {
     setTimeout(function() {
       console.log(this)
     });
   }
 }
// 箭頭函數(shù)
var obj = {
    say: function () {
        setTimeout(() => {
            console.log(this)
        });
    }
}
obj.say(); // obj

允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱(chēng)為解構(gòu)。比如：

var [a,b] = [1,2]
// a=1  b=2

解構(gòu)賦值必須符合下面三條規(guī)則：

左右結(jié)構(gòu)必須一樣

右邊必須是一個(gè)合法的數(shù)據(jù)

聲明和賦值必須一句話(huà)完成，不能把聲明與賦值分開(kāi)

let [a, b] = [1, 2]                // 左右都是數(shù)組，可以解構(gòu)賦值
let {a, b} = {a:1, b:2}            // 左右都是對(duì)象，可以解構(gòu)賦值
let [obj, arr] = [{a:1}, [1, 2]]   // 左右都是對(duì)象，可以解構(gòu)賦值

let [a, b] = {a:1, b:2}            // err 左右結(jié)構(gòu)不一樣，不可以解構(gòu)賦值
let {a,b} = {1, 2}                 // err 右邊不是一個(gè)合法的數(shù)據(jù)，不能解構(gòu)賦值

let [a, b];
[a, b] = [1, 2]                    // err 聲明與賦值分開(kāi)，不能解構(gòu)賦值

1.字符轉(zhuǎn)模板

字符轉(zhuǎn)模板使用反引號(hào)(``)來(lái)定義字符串，字符串模板支持?jǐn)嘈?，也可以在字符串嵌入變量，非常方便，可謂是前端的福利。

let name = "Jone"
`hello ${name},
how are you
`

2. startsWith(), endsWith(), includes()

startsWith() 表示參數(shù)字符串是否在原字符串的頭部，返回布爾值

endsWith() 表示參數(shù)字符串是否在原字符串的尾部，返回布爾值

includes() 表示是否在原字符串找到了參數(shù)字符串，返回布爾值

這三個(gè)方法都支持第二個(gè)參數(shù)，表示開(kāi)始搜索的位置。

let s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

石川blue老師講的是es6對(duì)數(shù)組擴(kuò)展了4個(gè)方法：map、reduce、filter、forEach。我認(rèn)為這四個(gè)方法好像在es5就有了（個(gè)人感覺(jué)，有可能不對(duì)），不管這四個(gè)方法是es5還是es6添加的方法了，大家對(duì)這幾個(gè)函數(shù)應(yīng)該都挺熟悉，就不多做介紹了，下面說(shuō)一下es6對(duì)數(shù)組擴(kuò)展的其他的新特性。
擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（...），它可以將一個(gè)數(shù)組拆分為參數(shù)序列，也可以收集剩下的所有的參數(shù)或者數(shù)組元素。

// 將一個(gè)數(shù)組拆分為參數(shù)序列
let arr = [1,2]
function add (a,b) {
    return a+b
}
add(...arr)

// 收集剩下的所有的參數(shù)
function f(a, ...arr) {
    console.log(...arr) // 2 3
}
f(1,2,3)

// 用于數(shù)組復(fù)制
let arr1 = [1,2]
let arr2 = [...arr1] // 或者let [...arr2] = arr1

ES6 提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了 Class（類(lèi)）這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類(lèi)。
先看如何定義一個(gè)class類(lèi)：

class User {
    constructor(name) {          // 構(gòu)造器，相當(dāng)于es5中的構(gòu)造函數(shù)
        this.name = name         // 實(shí)例屬性
    }
    showName(){                  // 定義類(lèi)的方法，不能使用function關(guān)鍵字，不能使用逗號(hào)分隔
        console.log(this.name)   
    }
}
var foo = new User("foo")

es6中class類(lèi)專(zhuān)用的構(gòu)造器，相當(dāng)于之前定義的構(gòu)造函數(shù)，每個(gè)類(lèi)都必須有constructor，如果沒(méi)有則自動(dòng)添加一個(gè)空的constructor構(gòu)造器。

創(chuàng)建實(shí)例的時(shí)候自動(dòng)執(zhí)行constructor函數(shù)

constructor中的this指向?qū)嵗?，并且默認(rèn)返回this（實(shí)例）

其實(shí)class的基本類(lèi)型就是函數(shù)（typeof User = "function"），既然是函數(shù)，那么就會(huì)有prototype屬性。

類(lèi)的所有方法都是定義在prototype上

class User {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}
User.toValue()             // err User.toValue is not a function
User.prototype.toValue()   // 可以調(diào)用toValue方法

// 等同于

User.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

類(lèi)的實(shí)例只能通過(guò)new來(lái)創(chuàng)建

除了靜態(tài)方法，定義在類(lèi)上的所有的方法都會(huì)被實(shí)例繼承

除非定義在類(lèi)的this對(duì)象上才是實(shí)例屬性，否則都是定義在類(lèi)的原型（prototype）上

//定義類(lèi)
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }

}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty("x") // true
point.hasOwnProperty("y") // true
point.hasOwnProperty("toString") // false
point.__proto__.hasOwnProperty("toString") // true

如果在類(lèi)中定義一個(gè)方法的前面加上static關(guān)鍵字，就表示定義一個(gè)靜態(tài)方法，靜態(tài)方法不會(huì)被實(shí)例繼承，但會(huì)被子類(lèi)繼承，所以不能通過(guò)實(shí)例使用靜態(tài)方法，而是通過(guò)類(lèi)直接調(diào)用。

class User {
    constructor(name){
        this.name = name
    }
    static show(){
        console.log("123")
    }
}
class VipUser extends User{}
VipUser.show()                    // 123
User.show()                       // 123
var foo = new User("foo")
foo.show()                        // foo.show is not a function

class的靜態(tài)屬性指的是 Class 本身的屬性，目前只能通過(guò)Class.propName定義靜態(tài)屬性

靜態(tài)屬性可以被子類(lèi)繼承，不會(huì)被實(shí)例繼承

class User{}
User.name = "foo" // 為class定義一個(gè)靜態(tài)屬性

class VipUser extends User{}
console.log(VipUser.name)         // foo

var foo = new User()
console.log(foo.name)             // undefined

es6是不支持私有屬性和私有方法，但是日常需求可能會(huì)用到私有屬性和私有方法，所以目前有一些提案，不過(guò)只是提案，尚未支持。

class通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承：

class User {
    constructor(name){
        this.name = name
    }
    show(){...}
}
class VipUser extends User{
    constructor(vipName){      // 子類(lèi)的構(gòu)造器
        super(vipName)         // 調(diào)用父類(lèi)的constructor。相當(dāng)于User.prototype.constructor.call(this,vipName)
    }
    showVip(){...}
}

var v = new VipUser("foo")     // 創(chuàng)建實(shí)例
v instanceof VipUser           // v是子類(lèi)VipUser的實(shí)例
v instanceof User              // v還是父類(lèi)User的實(shí)例

super可以當(dāng)做函數(shù)使用，也可以當(dāng)做對(duì)象使用。

當(dāng)做函數(shù)使用

super作為函數(shù)調(diào)用時(shí)，代表父類(lèi)的構(gòu)造函數(shù)，就是在子類(lèi)的構(gòu)造器中執(zhí)行父類(lèi)的constructor函數(shù)以獲取父類(lèi)的this對(duì)象，因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，所以ES6規(guī)定子類(lèi)必須在constructor中執(zhí)行一次super函數(shù)。super()函數(shù)只能在子類(lèi)的constructor中執(zhí)行，不能在其他地方執(zhí)行。

雖然super代表父類(lèi)的構(gòu)造器，但是super()在執(zhí)行時(shí)內(nèi)部的this指向子類(lèi)，所以super()就相當(dāng)于User.prototype.constructor.call(this)。

當(dāng)做對(duì)象使用

super可以作為對(duì)象調(diào)用父類(lèi)的屬性和方法，在子類(lèi)的普通方法中，指向父類(lèi)的原型對(duì)象（即User.prototype）；在子類(lèi)的靜態(tài)方法中，指向父類(lèi)。

class User {
  constructor(){
    this.x = "hello"
  }
  show() {
    return 2;
  }
}

class VipUser extends User {
  constructor() {
    super();
    console.log(super.show()); // 2  此時(shí)super指向User.prototype,相當(dāng)于User.prototype.show()
    console.log(super.x)       // undefined  無(wú)法訪問(wèn)實(shí)例屬性
  }
}

let vip = new VipUser();

由于super對(duì)象在普通函數(shù)中使用super指向User.prototype，所以super只能訪問(wèn)父類(lèi)的原型上的方法，沒(méi)法訪問(wèn)父類(lèi)的實(shí)例屬性和實(shí)例方法。

ES6規(guī)定如果在子類(lèi)中使用super對(duì)象調(diào)用父類(lèi)的方法時(shí)，方法內(nèi)部的this指向子類(lèi)

class User {
    constructor() {
        this.x = 1
    }
    show() {
        return this.x;
    }
}

class VipUser extends User {
    constructor() {
        super();
        this.x = 2
        console.log(super.show())   // 2   此時(shí)show()方法內(nèi)部的this指向子類(lèi)，所以輸出2，而不是1
    }
}

let vip = new VipUser();

上述代碼中雖然super.show()調(diào)用的是User.prototype.show()，但是由于通過(guò)super對(duì)象調(diào)用父類(lèi)方法時(shí)，方法內(nèi)部的this指向子類(lèi)，所以super.show()相當(dāng)于 super.show().call(this)，也就是User.prototype.show().call(this)

在子類(lèi)的靜態(tài)方法中super對(duì)象指向父類(lèi)，而不是父類(lèi)的原型（User.prototype）。

class User {
    constructor() {
        this.x = 1
    }
    static fn() {
        console.log("父類(lèi)靜態(tài)方法")
    }
}

class VipUser extends User {
    constructor() {
        super();
        this.x = 2
    }
    static childFn() {
        super.fn()       // 相當(dāng)于User.fn()
    }
}

VipUser.childFn()

在es5中每一個(gè)對(duì)象都有__proto__屬性，指向?qū)?yīng)的構(gòu)造函數(shù)的prototype屬性。Class 作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)有prototype屬性和__proto__屬性，因此同時(shí)存在兩條繼承鏈。

子類(lèi)的__proto__屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類(lèi)。

子類(lèi)prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類(lèi)的prototype屬性。

class User {
}

class VipUser extends User {
}

VipUser.__proto__ === User // true
VipUser.prototype.__proto__ === User.prototype // true

子類(lèi)實(shí)例的__proto__屬性指向子類(lèi)的原型（子類(lèi)的prototype），子類(lèi)實(shí)例的__proto__屬性的__proto__屬性指向父類(lèi)的原型（父類(lèi)的prototype）

class User {
}

class VipUser extends User {
}

var vip = new VipUser()
 
console.log(vip.__proto__ === VipUser.prototype)           // true
console.log(vip.__proto__.__proto__ === User.prototype)    // true

對(duì)象的擴(kuò)展運(yùn)算符（...）可以把對(duì)象可枚舉的屬性拆分為鍵值對(duì)序列

用于對(duì)象拷貝

let obj1 = {a:1,b:2}
let obj2 = {...obj1}
console.log(obj2)   // {a:1,b:2}

用于合并對(duì)象

let obj1 = {a:1,b:2}
let obj2 = {c:3,d:4}
let obj3 = {a:100, ...obj1, ...obj2, e:5, f:6}  // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
let obj4 = { ...obj1, ...obj2, e:5, f:6, a:100} // {a: 100, b: 2, c: 3, d: 4, e: 5,?f: 6}

如果后面的屬性和前面的屬性key相同，則會(huì)覆蓋前面的值

Object.assign方法用于對(duì)象的合并，將源對(duì)象（source）的所有可枚舉屬性，拷貝(淺拷貝)到目標(biāo)對(duì)象。

如果目標(biāo)對(duì)象與源對(duì)象有同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

const target = { a: 1 };

const source1 = {a: 100, b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:100, b:2, c:3}

Object.assign拷貝的屬性是有限制的，只拷貝源對(duì)象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性。

ES2017 引入了跟Object.keys、Object.values和Object.entries，作為遍歷一個(gè)對(duì)象的補(bǔ)充手段，供for...of循環(huán)使用。

Object.keys() 返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象所有可枚舉的屬性的鍵名

var obj = { foo: "bar", baz: 42 };
Object.keys(obj) // ["foo", "baz"]

Object.values() 返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象所有可枚舉屬性的鍵值。

const obj = { 100: "a", 2: "b", 7: "c" };
Object.values(obj)  // ["b", "c", "a"]

Object.entries() 返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象所有可枚舉屬性的鍵值對(duì)數(shù)組。

const obj = { foo: "bar", baz: 42 };
Object.entries(obj)  // [ ["foo", "bar"], ["baz", 42] ]

Generator可以理解為生成器，和普通函數(shù)沒(méi)多大區(qū)別，普通函數(shù)是只要開(kāi)始執(zhí)行，就一直執(zhí)行到底，而Generator函數(shù)是中間可以停，搭配使用next函數(shù)繼續(xù)執(zhí)行，用石川blue老師的話(huà)說(shuō)就是踹一腳走一步。

function * fn(){
    alert("a")
    yield
    alert("b")
}

var f = fn()
f.next()  // a
f.next()  // b

直接調(diào)用Generator函數(shù)，是什么都不執(zhí)行的，調(diào)用第一個(gè)next()才開(kāi)始執(zhí)行，一直執(zhí)行到第一個(gè)yield停止，第二次調(diào)用next()，從第一個(gè)yield執(zhí)行到第二個(gè)yield停止，依次類(lèi)推

yield代表暫時(shí)暫停執(zhí)行，next代表繼續(xù)執(zhí)行。

yield和next可以傳參數(shù)，也可以有返回值

1  function * fn(arg){
2      console.log(arg)
3      let x = yield 100
4      console.log(x)
5      return 200
6  }
7 
8  var f = fn("hello")
9  let step1 = f.next(1)
10 console.log(step1)
11 let step2 = f.next(2)
12 

// 輸出結(jié)果為
// hello
// {value: 100, done: false}
// 2
// {value: 200, done: true}

先看第八行 var f = fn("hello")，可以給Generator第一次執(zhí)行傳參數(shù)"hello"，等第一次調(diào)用next的時(shí)候就開(kāi)始Generator第一次執(zhí)行，這時(shí)arg的值就是"hello"

然后第九行l(wèi)et step1 = f.next(1)，這里需要注意，第一次調(diào)用next(1)時(shí)傳的參數(shù)是作廢的，所以1不會(huì)被傳入到Generator函數(shù)中去，因?yàn)镚enerator函數(shù)第一次執(zhí)行傳的參數(shù)是通過(guò)上面?zhèn)鱝rg的方式傳的參數(shù)。所以調(diào)用next()開(kāi)始Generator第一次執(zhí)行（console.log(arg)）,此時(shí)arg的值是‘hello’，所以首先打印‘hello’

然后第十行打印step1的返回值。其實(shí)next是有返回值的，返回值是一個(gè)對(duì)象，其中value屬性的值就是第一個(gè)yield返回的值100，done代表Generator時(shí)候執(zhí)行完畢。

然后第十一行l(wèi)et step2 = f.next(2)，這里的next(2)的參數(shù)可以傳到Generator函數(shù)中去，但是為什么把2傳給了x，估計(jì)很多人都想不明白，下面借鑒石川blue老師畫(huà)的一張圖來(lái)解釋一下：

看到黃色方框圈的let step1 = f.next(1)，對(duì)應(yīng)執(zhí)行黃色曲線圈的那部分代碼，紅色方框圈的let step12= f.next(2)對(duì)應(yīng)執(zhí)行紅色曲線圈的部分代碼，不要管為什么，你只需要這么理解就ok了。所以第二次next(2)傳的參數(shù)2就傳給了x

然后再看第十二行console.log(step2)，所以第二個(gè)next的返回值就是對(duì)象{value: 200, done: true}，value表示最后Generator函數(shù)的返回值return 200，done表示Generator函數(shù)執(zhí)行完畢。

這種Generator函數(shù)適用多個(gè)異步請(qǐng)求之間有邏輯分析的情況，比如有一個(gè)需求，先請(qǐng)求用戶(hù)數(shù)據(jù)，根據(jù)用戶(hù)數(shù)據(jù)的類(lèi)型判斷用戶(hù)是普通用戶(hù)還是VIP用戶(hù)，然后再根據(jù)判斷結(jié)果請(qǐng)求普通商品數(shù)據(jù)或者VIP商品數(shù)據(jù)。

// 借助runner腳本，runner腳本規(guī)定Generator函數(shù)執(zhí)行完一個(gè)next之后自動(dòng)執(zhí)行下一個(gè)next
runner(function() * (){
    let userData = yield $.ajax(...) // 請(qǐng)求用戶(hù)數(shù)據(jù)
    if(userData.type === "vip") {
        let goods = yield $.ajax(...) // 請(qǐng)求vip商品數(shù)據(jù)
    } else {
        let goods = yield $.ajax(...) // 請(qǐng)求普通商品數(shù)據(jù)
    }
})

使用Generator函數(shù)使得代碼看起來(lái)更像同步代碼，其實(shí)使用Promise同樣可以實(shí)現(xiàn)這種效果，只不過(guò)得需要在then()函數(shù)中嵌套請(qǐng)求。

async其實(shí)就是對(duì)Generator的封裝，只不過(guò)async可以自動(dòng)執(zhí)行next()。

async function read () {
    let data1= await new Promise(resolve => {
        resolve("100")
    })
    let data2 = await 200
    
    return 300
}

async默認(rèn)返回一個(gè)Promise，如果return不是一個(gè)Promise對(duì)象，就會(huì)被轉(zhuǎn)為立即resolve的Promise，可以在then函數(shù)中獲取返回值。

async必須等到里面所有的await執(zhí)行完，async才開(kāi)始return，返回的Promise狀態(tài)才改變。除非遇到return和錯(cuò)誤。

async function fn () {
    await 100
    await 200
    return 300
}
fn().then(res => {
    console.log9(res) // 300
})

await也是默認(rèn)返回Promise對(duì)象，如果await后面不是一個(gè)Promise對(duì)象，就會(huì)轉(zhuǎn)為立即resolve的Promise

如果一個(gè)await后面的Promise如果為reject，那么整個(gè)async都會(huì)中斷執(zhí)行，后面的awiat都不會(huì)執(zhí)行，并且拋出錯(cuò)誤，可以在async的catch中捕獲錯(cuò)誤

async function f() {
  await Promise.reject("error");
  await Promise.resolve("hello world"); // 不會(huì)執(zhí)行
}
f().then(res =>{

}).catch(err=>{
    console.log(err)  // error
})

如果希望一個(gè)await失敗，后面的繼續(xù)執(zhí)行，可以使用try...catch或者在await后面的Promise跟一個(gè)catch方法：

// try...catch
async function f() {
  try {
    await Promise.reject("出錯(cuò)了");
  } catch(e) {
  }
  return await Promise.resolve("hello world");
}

f()
.then(v => console.log(v))   // hello world

// catch
async function f() {
  await Promise.reject("出錯(cuò)了")
    .catch(e => console.log(e));   // 出錯(cuò)了
  return await Promise.resolve("hello world");
}

f()
.then(v => console.log(v))  // hello world