摘要：和命令和類似于中的的使用都是用來聲明變量的，只是都存在各自的特殊用法。解構(gòu)數(shù)組和對(duì)象是中最常用也是最重要表示形式。實(shí)例生成以后，可以用方法分別指定狀態(tài)和狀態(tài)的回調(diào)函數(shù)。這個(gè)迭代器對(duì)象擁有一個(gè)叫做的方法來幫助你重啟函數(shù)并得到下一個(gè)值。

let和const類似于javascript中的var的使用,都是用來聲明變量的，只是都存在各自的特殊用法。

在javascript中只有全局作用域和函數(shù)作用域，例如：

var name = "one";//全局變量
while(true){
     name  = "two";
     console.log(name);//two,內(nèi)層變量覆蓋了外層變量
     break;
}
console.log(name);//two,

不出意料，兩次輸出結(jié)果都是two。

而ES6帶來的一個(gè)新特性：

let：為javascript添加一個(gè)塊級(jí)作用域

使用let聲明的變量，只作用于使用了let命令的代碼塊：

var name = "one";//全局變量
while(true){
     let name  = "two";
     console.log(name);//two,
     break;
}
console.log(name);//one

const :聲明一個(gè)只讀的常量。一旦聲明，常量的值就不能改變

const PI = Math.PI;
console.log(PI); //3.141592653589793
PI = 666; //報(bào)錯(cuò)Module build failed: SyntaxError: "PI" is read-only

es6模板字符簡(jiǎn)直是開發(fā)者的福音，解決了ES5在字符串功能上的痛點(diǎn)。

基本的字符串格式化，將表達(dá)式嵌入字符串中進(jìn)行拼接。用${}來界定。例如：

 //es5 
var name = "Archer"
console.log("hello" + name)

//es6
const name = "Archer"
console.log(`hello ${name}`) //hello Archer

在ES5時(shí)我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(hào)(``)直接搞定。

// es5
var msg = "Hi 
Archer!
"

// es6
const template = `

    hello Archer
`

對(duì)于字符串es6當(dāng)然也提供了很多厲害的方法,列舉幾個(gè)常用的:

// includes：判斷是否包含然后直接返回布爾值
let str = "hahay"
console.log(str.includes("y")) // true

// repeat: 獲取字符串重復(fù)n次
let s = "ha"
console.log(s.repeat(3)) // "hahaha"

ES6很有意思的一部分就是函數(shù)的快捷寫法，也就是箭頭函數(shù)，箭頭函數(shù)最直觀的三個(gè)特點(diǎn)：

不需要function關(guān)鍵字來創(chuàng)建函數(shù)

省略return關(guān)鍵字

繼承當(dāng)前上下文的 this 關(guān)鍵字

let arr = [1,2,3];

arr.map(item => item + 1)
//等同于
arr.map(function(item){
    return item + 1
})

當(dāng)函數(shù)有且僅有一個(gè)參數(shù)的時(shí)候，是可以省略掉(),當(dāng)函數(shù)返回有且僅有一個(gè)表達(dá)式的時(shí)候可以省略{}；例如:

//參數(shù)name就沒有括號(hào)
var people = name => "hello" + name

ES6 之前，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法。例如：

function log(x, y) {
    y = y || "Archer";
    console.log(x, y);
}

log("Hello") // Hello Archer
log("Hello", "China") // Hello China
log("Hello", "") // Hello Archer

上面代碼檢查函數(shù)log的參數(shù)y有沒有賦值，如果沒有，則指定默認(rèn)值為Archer。這種寫法的缺點(diǎn)在于，如果參數(shù)y賦值了，但是對(duì)應(yīng)的布爾值為false，則該賦值不起作用。就像上面代碼的最后一行，參數(shù)y等于空字符，結(jié)果被改為默認(rèn)值。

現(xiàn)在 ES6 允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值，即直接寫在參數(shù)定義的后面，為賦值提供了簡(jiǎn)便的方法。例如：

function log(x, y = "Archer") {
    console.log(x, y);
}

log("Hello") // Hello Archer
log("Hello", "China") // Hello China
log("Hello", "") // Hello

可以看到，ES6 的寫法比 ES5 簡(jiǎn)潔許多，而且非常自然。下面是另一個(gè)例子。

function Point(x = 0, y = 0) {
    this.x = x;
    this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

...展開運(yùn)算符，有兩種層面

展開運(yùn)算符(spread operator)作用是和字面意思一樣，就是把東西展開?？梢杂迷赼rray和object上都行。例如：

let a = [1,2,3];  
let b = [0, ...a, 4]; // [0,1,2,3,4]  
  
let obj = { a: 1, b: 2 };  
let obj2 = { ...obj, c: 3 }; // { a:1, b:2, c:3 }  
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }  

剩余操作符(rest operator)是解構(gòu)的一種，意思就是把剩余的東西放到一個(gè)array里面賦值給它。一般只針對(duì)array的解構(gòu)。例如：

let a = [1,2,3];  
let [b, ...c] = a;  
b; // 1  
c; // [2,3]  
  
// 也可以  
let a = [1,2,3];  
let [b, ...[c,d,e]] = a;  
b; // 1  
c; // 2  
d; // 3  
e; // undefined  
  
// 也可以  
function test(a, ...rest){  
  console.log(a); // 1  
  console.log(rest); // [2,3]  
}  
  
test(1,2,3) 

對(duì)象初始化簡(jiǎn)寫

ES5我們對(duì)于對(duì)象都是以鍵值對(duì)的形式書寫，是有可能出現(xiàn)鍵值對(duì)重名的。例如：

function people(name, age) {
    return {
        name: name,
        age: age
    };
}

鍵值對(duì)重名，ES6可以簡(jiǎn)寫如下：

function people(name, age) {
    return {
        name,
        age
    };
}

ES6 同樣改進(jìn)了為對(duì)象字面量方法賦值的語法。ES5為對(duì)象添加方法：

const people = {
    name: "lux",
    getName: function() {
        console.log(this.name)
    }
}

ES6通過省略冒號(hào)與 function 關(guān)鍵字，將這個(gè)語法變得更簡(jiǎn)潔：

const people = {
    name: "lux",
    getName () {
        console.log(this.name)
    }
}

ES6 對(duì)象提供了Object.assign()這個(gè)方法來實(shí)現(xiàn)淺復(fù)制。Object.assign()可以把任意多個(gè)源對(duì)象自身可枚舉的屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象。第一參數(shù)即為目標(biāo)對(duì)象。在實(shí)際項(xiàng)目中，我們?yōu)榱瞬桓淖冊(cè)磳?duì)象。一般會(huì)把目標(biāo)對(duì)象傳為{}。

const obj = Object.assign({}, objA, objB)

數(shù)組和對(duì)象是JS中最常用也是最重要表示形式。為了簡(jiǎn)化提取信息，ES6新增了解構(gòu)，這是將一個(gè)數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過程。

ES5我們提取對(duì)象中的信息形式如下：

const people = {
    name: "Archer",
    age: 28
}

const name = people.name
const age = people.age
console.log(name + " --- " + age) //"Archer --- 28"

在ES6之前我們就是這樣獲取對(duì)象信息的，一個(gè)一個(gè)獲取?，F(xiàn)在，解構(gòu)能讓我們從對(duì)象或者數(shù)組里取出數(shù)據(jù)存為變量。例如:

 //對(duì)象
const people = {
    name: "Archer",
    age: 28
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//數(shù)組
const color = ["red", "blue"]
const [first, second] = color
console.log(first) //"red"
console.log(second) //"blue"

import導(dǎo)入模塊、export導(dǎo)出模塊

//全部導(dǎo)入
import people from "./example"

//有一種特殊情況，即允許你將整個(gè)模塊當(dāng)作單一對(duì)象進(jìn)行導(dǎo)入
//該模塊的所有導(dǎo)出都會(huì)作為對(duì)象的屬性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//導(dǎo)入部分
import {name, age} from "./example"

// 導(dǎo)出默認(rèn), 有且只有一個(gè)默認(rèn)
export default App

// 部分導(dǎo)出
export class App extend Component {};

導(dǎo)入的時(shí)候有沒有大括號(hào)的區(qū)別是什么。下面是我在工作中的總結(jié)：

當(dāng)用export default people導(dǎo)出時(shí)，就用 import people 導(dǎo)入（不帶大括號(hào)）

一個(gè)文件里，有且只能有一個(gè)export default。但可以有多個(gè)export。

當(dāng)用export name 時(shí)，就用import { name }導(dǎo)入（記得帶上大括號(hào)）

當(dāng)一個(gè)文件里，既有一個(gè)export default people, 又有多個(gè)export name 或者 export
age時(shí)，導(dǎo)入就用 import people, { name, age }

當(dāng)一個(gè)文件里出現(xiàn)n多個(gè) export 導(dǎo)出很多模塊，導(dǎo)入時(shí)除了一個(gè)一個(gè)導(dǎo)入，也可以用import * as example

在promise之前代碼過多的回調(diào)或者嵌套，可讀性差、耦合度高、擴(kuò)展性低。通過Promise機(jī)制，扁平化的代碼機(jī)構(gòu)，大大提高了代碼可讀性；用同步編程的方式來編寫異步代碼，保存線性的代碼邏輯，極大的降低了代碼耦合性而提高了程序的可擴(kuò)展性。

Promise對(duì)象有以下兩個(gè)特點(diǎn)：

對(duì)象的狀態(tài)不受外界影響。Promise對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)。

一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果，這時(shí)就稱為
resolved（已定型）。如果改變已經(jīng)發(fā)生了，你再對(duì)Promise對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過了它，再去監(jiān)聽，是得不到結(jié)果的。

說白了就是用同步的方式去寫異步代碼,下面代碼創(chuàng)造了一個(gè)Promise實(shí)例:

const promise = new Promise(function(resolve, reject) {
    if (/* 異步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己部署。

resolve函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；reject函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆　保磸?pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。

Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

下面是一個(gè)Promise對(duì)象的簡(jiǎn)單例子,timeout方法返回一個(gè)Promise實(shí)例，表示一段時(shí)間以后才會(huì)發(fā)生的結(jié)果。過了指定的時(shí)間（ms參數(shù)）以后，Promise實(shí)例的狀態(tài)變?yōu)閞esolved，就會(huì)觸發(fā)then方法綁定的回調(diào)函數(shù)。:

function timeout(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, "done");
    });
}

timeout(100).then((value) => {
    console.log(value);
});

生成器（ generator）是能返回一個(gè)迭代器的函數(shù)。生成器函數(shù)也是一種函數(shù)，最直觀的表現(xiàn)就是比普通的function多了個(gè)星號(hào)*，在其函數(shù)體內(nèi)可以使用yield關(guān)鍵字,有意思的是函數(shù)會(huì)在每個(gè)yield后暫停。

這里生活中有一個(gè)比較形象的例子。咱們到銀行辦理業(yè)務(wù)時(shí)候都得向大廳的機(jī)器取一張排隊(duì)號(hào)。你拿到你的排隊(duì)號(hào)，機(jī)器并不會(huì)自動(dòng)為你再出下一張票。也就是說取票機(jī)“暫停”住了，直到下一個(gè)人再次喚起才會(huì)繼續(xù)吐票。

說說迭代器。當(dāng)你調(diào)用一個(gè)generator時(shí)，它將返回一個(gè)迭代器對(duì)象。這個(gè)迭代器對(duì)象擁有一個(gè)叫做next的方法來幫助你重啟generator函數(shù)并得到下一個(gè)值。next方法不僅返回值，它返回的對(duì)象具有兩個(gè)屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經(jīng)停止提供值。繼續(xù)用剛剛?cè)∑钡睦?，每張排?duì)號(hào)就是這里的value，打印票的紙是否用完就這是這里的done。

// 生成器
function *createIterator() {
    yield 1;
    yield 2;
    yield 3;
}

// 生成器能像正規(guī)函數(shù)那樣被調(diào)用，但會(huì)返回一個(gè)迭代器
let iterator = createIterator();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

那生成器和迭代器又有什么用處呢？

圍繞著生成器的許多興奮點(diǎn)都與異步編程直接相關(guān)。異步調(diào)用對(duì)于我們來說是很困難的事，我們的函數(shù)并不會(huì)等待異步調(diào)用完再執(zhí)行，你可能會(huì)想到用回調(diào)函數(shù)，（當(dāng)然還有其他方案比如Promise比如Async/await）。

生成器可以讓我們的代碼進(jìn)行等待。就不用嵌套的回調(diào)函數(shù)。使用generator可以確保當(dāng)異步調(diào)用在我們的generator函數(shù)運(yùn)行一下行代碼之前完成時(shí)暫停函數(shù)的執(zhí)行。

那么問題來了，咱們也不能手動(dòng)一直調(diào)用next()方法，你需要一個(gè)能夠調(diào)用生成器并啟動(dòng)迭代器的方法。就像這樣子的：

function run(taskDef) { //taskDef即一個(gè)生成器函數(shù)
    // 創(chuàng)建迭代器，讓它在別處可用
    let task = taskDef();

    // 啟動(dòng)任務(wù)
    let result = task.next();

    // 遞歸使用函數(shù)來保持對(duì) next() 的調(diào)用
    function step() {

        // 如果還有更多要做的
        if (!result.done) {
            result = task.next();
            step();
        }
    }

    // 開始處理過程
    step();

}

生成器與迭代器最有趣、最令人激動(dòng)的方面，或許就是可創(chuàng)建外觀清晰的異步操作代碼。你不必到處使用回調(diào)函數(shù)，而是可以建立貌似同步的代碼，但實(shí)際上卻使用 yield 來等待異步操作結(jié)束。

ES6的特性遠(yuǎn)不止于此，但對(duì)于我們?nèi)粘５拈_發(fā)開說，這已經(jīng)是夠夠的了，還有很多有意思的方法。比如for of,Iterator...等等。

來都來了點(diǎn)一下贊吧，你的贊是對(duì)我最大的鼓勵(lì)^_^

希望更全面了解es6伙伴們可以去看阮一峰所著的電子書ECMAScript 6入門