摘要：返回一個(gè)對(duì)象，遍歷對(duì)象自身和繼承的所有可枚舉屬性不含，與相同和在紅寶書(shū)中就已經(jīng)提到過(guò)屬性，表示的是引用類(lèi)型實(shí)例的一個(gè)內(nèi)部指針，指向該實(shí)例的構(gòu)造函數(shù)的原型對(duì)象。

半個(gè)月前就決定要將ES6的學(xué)習(xí)總結(jié)一遍，結(jié)果拖延癥一犯，半個(gè)月就過(guò)去了，現(xiàn)在補(bǔ)起來(lái)，慚愧慚愧。

阮一峰的《ES6標(biāo)準(zhǔn)入門(mén)》這本書(shū)有300頁(yè)左右，除了幾個(gè)新的API和js語(yǔ)法的擴(kuò)展,真正有價(jià)值的內(nèi)容并不多。所謂“存在即合理”，每部分的內(nèi)容都對(duì)相應(yīng)的人群有價(jià)值，我將結(jié)合我在實(shí)習(xí)中接觸過(guò)的ES6的部分和我的個(gè)人理解來(lái)對(duì)這本書(shū)的內(nèi)容做個(gè)總結(jié)。如有不足或者謬誤指出，還請(qǐng)拍磚。

總結(jié)主要從三個(gè)方面展開(kāi)：1. 語(yǔ)法擴(kuò)展；2. ES6新API; 3. 模塊化方案。

let、const聲明的標(biāo)識(shí)符僅在塊級(jí)作用域內(nèi)有效，塊級(jí)作用域就是大括號(hào)（{}）包括的區(qū)域。const與let的差別在于let聲明的是變量，const聲明的是常量。

let、const不存在變量提升

// let/const不存在變量提升
console.log(foo);   // undefined
var foo = "abc";

console.log(lish);  // 未定義報(bào)錯(cuò),ReferenceError
let lish = "hello";

let、const暫時(shí)性死區(qū):已經(jīng)聲明了變量，在聲明變量之前，該變量都是不可用的。在局部作用域中，即使已經(jīng)存在全局的同名變量，還是無(wú)法在局部聲明之前訪(fǎng)問(wèn)該變量，有點(diǎn)繞，直接上代碼。

// 暫時(shí)性死區(qū)
var num = 1;
const add = () => {
    console.log(num);
    let num;
}
add();      // 報(bào)錯(cuò)，num is not defined

let、const不允許重復(fù)聲明,在ES5中，用var聲明的變量我們可以用var重復(fù)聲明，就好像重新賦值一樣，但是用let、const重復(fù)聲明會(huì)報(bào)錯(cuò)。

解構(gòu)賦值說(shuō)白了就是“模式匹配”，從等號(hào)兩邊對(duì)應(yīng)的位置取出對(duì)應(yīng)的值

數(shù)組的解構(gòu)賦值

let [a, b, c] = [1, 2, 3];
// 從對(duì)應(yīng)位置拿出對(duì)應(yīng)值，相當(dāng)于我們聲明了三個(gè)變量
// let a = 1, b = 2, c = 3;

需要指出一點(diǎn)，只要某種數(shù)據(jù)具有Iterator接口，就可以采用數(shù)組形式的解構(gòu)賦值(其中就包括字符串)，Iterator我們會(huì)在總結(jié)（2）提到。 舉個(gè)例子

// Set是ES6新增的一種數(shù)據(jù)類(lèi)型，擁有Iterator接口
let [x, y, z] = new Set([1, 2, 3]); // x = 1, y = 2, z = 3

解構(gòu)允許指定默認(rèn)值。默認(rèn)值有undefined觸發(fā)

let [x = 1, y = 2] = [44]; // x = 44, y = 2;
let [x = 1, y = 2] = [44, undefined]; // 與上面等價(jià)

對(duì)象的解構(gòu)賦值

只要我們知道這是模式匹配，就比較好理解了,先通過(guò)鍵找到對(duì)應(yīng)的值，將值賦給等式左邊相同鍵名對(duì)應(yīng)的變量，{foo}就是{foo: foo}的簡(jiǎn)寫(xiě)形式，這屬于對(duì)象的擴(kuò)展，接下來(lái)會(huì)提到。

let { foo, bar } = { foo: "hello", bar: "world" };  // foo = "hello", bar = "world"
let {foo: val, bar} =  { foo: "hello", bar: "world" };  // val = "hello", bar = "world";

和數(shù)組解構(gòu)類(lèi)似，也可以為對(duì)象解構(gòu)賦默認(rèn)值let {x = 3} = {};,默認(rèn)值由undefined觸發(fā)。
需要注意的一點(diǎn)是，大括號(hào)不能出現(xiàn)在行首，會(huì)被解析為代碼塊，比如{x} = {x: 1};

函數(shù)參數(shù)的解構(gòu)賦值

參數(shù)可以為數(shù)組或?qū)ο?
比如：我們?yōu)楹瘮?shù)直接傳一個(gè)數(shù)組，在函數(shù)內(nèi)部我們直接可以使用解構(gòu)后的值

const add = ([x, y]) => {
    return x + y;
}
console.log(add([1, 2]);    // 3
console.log(add.length);    // 1

上面代碼中，比較好理解的是add.length，代表函數(shù)參數(shù)的個(gè)數(shù)，但是我們?yōu)閰?shù)指定默認(rèn)值時(shí), length為0，原因就是函數(shù)的length屬性為沒(méi)有指定默認(rèn)值的參數(shù)的個(gè)數(shù)，而且不包括rest參數(shù)

const add = ([x, y] = [0, 0]) => {
    return x + y;
}
console.log(add());    // 0
console.log(add.length);    // 0

字符串?dāng)U展中，最有用的就是模板字符串，用反引號(hào)（`）標(biāo)識(shí)，模板字符串中可以使用變量，省去了用連接符來(lái)拼接字符串的麻煩。

let foo = "hello";
console.log(`${foo} world!`);   // hello world

看了上面，相信大家都會(huì)在模板字符串中使用變量了，就是講變量寫(xiě)在${}中就行了。
另外，模板字符串中還可以使用表達(dá)式（包括函數(shù)調(diào)用，運(yùn)算等），同樣，將表達(dá)式寫(xiě)在${}中就行了。

擴(kuò)展運(yùn)算符
作用：將一個(gè)數(shù)組(姑且先說(shuō)是數(shù)組)轉(zhuǎn)換為用逗號(hào)分隔的參數(shù)序列。

console.log([1, 2, ...[2, 3, 4]]); // [1, 2, 2, 3, 4]
console.log(..."hello"); // h e l l o

// generator函數(shù)
let go = function* () {
    yield 1;
    yield 2;
    yield 3;
};
console.log(...go());   // 1 2 3

問(wèn)題來(lái)了：擴(kuò)展運(yùn)算符可以作用于哪些數(shù)據(jù)類(lèi)型呢？

回答這個(gè)問(wèn)題很關(guān)鍵，直接說(shuō)答案吧：擁有Iterator接口的數(shù)據(jù)類(lèi)型

rest參數(shù)

阮大神的書(shū)上原話(huà)：rest參數(shù)（...變量名），用于獲取函數(shù)多余的參數(shù)，放進(jìn)一個(gè)數(shù)組中。

const add = function (arg1, ...values) {
    return values;
};
console.log(add(1, 3, 5, 7));   // [3, 5, 7]

個(gè)人之見(jiàn)，這句話(huà)有點(diǎn)問(wèn)題，rest參數(shù)好比是擴(kuò)展運(yùn)算符的逆運(yùn)算，怎么能只用于獲取函數(shù)多余的參數(shù)呢，事實(shí)證明，rest不僅僅用于獲取函數(shù)參數(shù)。
我們看上的函數(shù)定義部分的參數(shù)和函數(shù)調(diào)用部分的參數(shù)，這不就是一個(gè)模式匹配嗎？arg1對(duì)應(yīng)第一個(gè)參數(shù)，...values對(duì)應(yīng)剩余的參數(shù)。說(shuō)道模式匹配，不得不說(shuō)解構(gòu)賦值，那么我們?cè)诮鈽?gòu)賦值中應(yīng)用rest參數(shù)呢，下面我們?cè)囋嚳?/p>

let values, num;
[num, ...values] = [1, 3, 5, 7];
console.log(values);    // [3, 5, 7]

實(shí)驗(yàn)證明rest參數(shù)也可以用于解構(gòu)賦值中，要注意的是rest參數(shù)只能放在其他參數(shù)的后面，否則rest參數(shù)無(wú)法判斷里面參數(shù)的個(gè)數(shù)

Array.from()
作用： 將類(lèi)似數(shù)組的對(duì)象和可遍歷的對(duì)象（擁有Iterator接口）轉(zhuǎn)為真正的數(shù)組

所謂類(lèi)似數(shù)組的對(duì)象，關(guān)鍵在于有沒(méi)有一個(gè)length屬性表示對(duì)象中屬性的個(gè)數(shù)

var obj = {0: "hello", "sayName": "hi", 1: "world", length: 2};
console.log(Array.from(obj));   //["hello", "world"];

上面轉(zhuǎn)換的只是鍵名為數(shù)字的屬性

Array.of()
作用：將一組數(shù)值轉(zhuǎn)換為數(shù)組，主要目的為了彌補(bǔ)Array構(gòu)造函數(shù)不能識(shí)別長(zhǎng)度還是值。

實(shí)例方法find()和findIndex()
find()找到第一個(gè)符合條件的數(shù)組成員，參數(shù)為函數(shù)，返回true表示找到

findIndex(),與find()類(lèi)似，返回的是數(shù)組的索引。

遍歷方法entries()、keys()、values()
都返回遍歷器對(duì)象，便利器對(duì)象可用for...of進(jìn)行遍歷

for(let index of ["a", "b"].keys()) {
    console.log(index);
}
// 0
// 1

for(let value of ["a", "b"].values()) {
    console.log(value);
}
// a
// b

for(let [index, value] of ["a", "b"].entries()){
    console.log(index, value);
}
// 0 a
// 1 b

includes()
作用：判斷數(shù)組是否包含某個(gè)值，屬于ES7，客戶(hù)端使用要使用Babel進(jìn)行轉(zhuǎn)碼，為了彌補(bǔ)indexOf()的不足，indexOf()內(nèi)部使用“===”進(jìn)行判斷，對(duì)于NaN的判斷會(huì)出錯(cuò)，而includes()解決了這個(gè)問(wèn)題

console.log([NaN, NaN].indexOf(NaN));   // -1
console.log([NaN, NaN].includes(NaN));  // true

函數(shù)參數(shù)的解構(gòu)賦值，默認(rèn)值在第一部分已經(jīng)提到，這里就不再總結(jié)，在函數(shù)擴(kuò)展這一部分，我主要總結(jié)箭頭函數(shù)的使用
ES6中可以使用箭頭函數(shù)定義函數(shù)，方式如下：

const f = (arg1) => {
    return arg1 * 2;
}
const f = arg1 => arg1*2;     // 等同于上面的定義

當(dāng)參數(shù)只有一個(gè)時(shí)，可以省略括號(hào)，當(dāng)函數(shù)體只有return語(yǔ)句一條語(yǔ)句時(shí)，可以省略大括號(hào)和return關(guān)鍵字

使用箭頭函數(shù)需要注意的幾點(diǎn)

箭頭函數(shù)不可以當(dāng)做構(gòu)造函數(shù)

不可以使用arguments對(duì)象

不可以使用yield命令，不能用作generator函數(shù)

箭頭函數(shù)沒(méi)有自己的this,導(dǎo)致內(nèi)部的this就是外層代碼的this,所以不能用作構(gòu)造函數(shù)，也不能使用call()、apply()、bind()改變this的指向

屬性的簡(jiǎn)潔表示法

變量名轉(zhuǎn)屬性名

let foo = "hello";
let obj = {foo: foo};

// 簡(jiǎn)寫(xiě)形式
let foo = "hello";
let obj = {foo};    // 變量名直接轉(zhuǎn)為屬性名

方法的簡(jiǎn)寫(xiě)

let obj = {
    sayName: function() {
        return "hello";
    }
}

// 簡(jiǎn)寫(xiě)形式
let obj = {
    sayName() {
        return "hello";
    }
};

ES6允許字面量定義對(duì)象時(shí)使用表達(dá)式作為對(duì)象的屬性名
將表達(dá)式放在中括號(hào)中，但是屬性名表達(dá)式與簡(jiǎn)潔表示法不能同時(shí)使用

let obj = {
    ["a" + "bc"]: 123
}

Object.is()
用來(lái)比較兩個(gè)值是否嚴(yán)格相等，與“===”行為基本一致，不同之處在于： +0不等于-0，NaN等于自身

Object.assign()
將源對(duì)象的所有可枚舉的自有屬性復(fù)制（淺復(fù)制）到目標(biāo)對(duì)象Object.assign(target, source1, source2 ...),返回target,可以處理數(shù)組，將其視為對(duì)象

let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
// target => {a: 1, b: 2, c: 3};

一般情況下，我們不希望改變對(duì)象，只希望合并對(duì)象的屬性，那么可以將target設(shè)為空對(duì)象{}， Object.assign({}, source1, source2);

需要注意的是Object.assign()執(zhí)行的是淺復(fù)制， 如果源對(duì)象的屬性為引用類(lèi)型，那么target中對(duì)應(yīng)的屬性和源對(duì)象中的屬性引用同一個(gè)值

let source1 = {b: {test: "hello world"}};
let target = Object.assign({}, source1);

console.log(target.b);  // { test: "hello world" }

source1.b.test = 111111;
console.log(target.b);  // {test: 111111}

對(duì)象的屬性的遍歷

for...in 循環(huán)遍歷對(duì)象自身和繼承的可枚舉屬性（不含Symbol屬性），Symbol是ES6中的一種新的數(shù)據(jù)類(lèi)型，表示一個(gè)獨(dú)一無(wú)二的值，在第二大部分，我將會(huì)講到這個(gè)類(lèi)型。
Object.keys(obj) 返回?cái)?shù)組，包括對(duì)象自身的所有可枚舉屬性（不含Symbol屬性）
Object.getOwnPropertyNames(obj) 返回?cái)?shù)組，包含對(duì)象自身的所有屬性（包括不可枚舉屬性，不包含Symbol屬性）

說(shuō)白了，就是ES5中遍歷方法都無(wú)法獲取到Symbol屬性

Object.getOwnPropertySymbols(obj)返回?cái)?shù)組，包含自身的所有Symbol屬性
Reflect.ownKeys(obj)返回一個(gè)數(shù)組，包含對(duì)象自身的所有屬性（包括不可枚舉和Symbol）， Reflect是ES6中的新API，其目的之一就是將Object對(duì)象上一些屬于語(yǔ)言層面的方法放到該對(duì)象身上，并修改某些方法，讓其變得更合理。
Reflect.enumerate(obj)返回一個(gè)Iterator對(duì)象，遍歷對(duì)象自身和繼承的所有可枚舉屬性（不含Symbol），與for...in相同

__proto__和Object.setPrototype()

在紅寶書(shū)中就已經(jīng)提到過(guò)__proto__屬性，表示的是引用類(lèi)型實(shí)例的一個(gè)內(nèi)部指針，指向該實(shí)例的構(gòu)造函數(shù)的原型對(duì)象。一般不建議我們直接使用，因?yàn)檫@是一個(gè)非標(biāo)準(zhǔn)屬性，但是所有瀏覽器都部署了這個(gè)屬性，node中也可以使用

// 利用__proto__實(shí)現(xiàn)繼承
function Animal(name) {
    this.name = name;
}
Animal.prototype.sayName = function() {
    console.log(this.name);
};

function Dog(name, leg) {
    Animal.call(this, name);
    this.leg = leg;
}
Dog.prototype.__proto__ = Animal.prototype;
Dog.prototype.constructor = Dog;

var dog = new Dog("Genkle", 4);
dog.sayName();  // Genkle

Object.setPrototype(object, prototype)用于設(shè)置一個(gè)對(duì)象的prototype對(duì)象，相當(dāng)于object.__proto__ = prototype,是ES6中設(shè)置原型對(duì)象的方法。