摘要：需要更多地去學(xué)習(xí)應(yīng)用。當(dāng)你調(diào)用一個(gè)時(shí)，它將返回一個(gè)迭代器對(duì)象。這個(gè)迭代器對(duì)象擁有一個(gè)叫做的方法來幫助你重啟函數(shù)并得到下一個(gè)值。那么問題來了，咱們也不能手動(dòng)一直調(diào)用方法，你需要一個(gè)能夠調(diào)用生成器并啟動(dòng)迭代器的方法。

開始用vue或者react，很多時(shí)候我們都會(huì)把ES6這個(gè)大兄弟加入我們的技術(shù)棧中。但是ES6那么多那么多特性，我們需要全部都掌握嗎？秉著二八原則，掌握好常用的，有用的這個(gè)可以讓我們快速起飛。

接下來我們就聊聊ES6那些可愛的新特性吧。

我們都是知道在ES6以前，var關(guān)鍵字聲明變量。無論聲明在何處，都會(huì)被視為聲明在函數(shù)的最頂部(不在函數(shù)內(nèi)即在全局作用域的最頂部)。這就是函數(shù)變量提升例如:

function aa() {    
    if(bool) {        
        var test = "hello man"
    } else {        
        console.log(test)
    }
  }

以上的代碼實(shí)際上是：

function aa() {    
    var test // 變量提升
    if(bool) {
        test = "hello man"
    } else {        //此處訪問test 值為undefined
        console.log(test)
    }    //此處訪問test 值為undefined
  }

所以不用關(guān)心bool是否為true or false。實(shí)際上，無論如何test都會(huì)被創(chuàng)建聲明。

接下來ES6主角登場(chǎng)：
我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級(jí)作用域。怎么理解這個(gè)塊級(jí)作用域？

在一個(gè)函數(shù)內(nèi)部
在一個(gè)代碼塊內(nèi)部
說白了 {}大括號(hào)內(nèi)的代碼塊即為let 和 const的作用域。
看以下代碼：

function aa() {    
    if(bool) {       
        let test = "hello man"
    } else {        //test 在此處訪問不到
        console.log(test)
    }
  }

let的作用域是在它所在當(dāng)前代碼塊，但不會(huì)被提升到當(dāng)前函數(shù)的最頂部。

再來說說const。

const name = "lux"
name = "joe" //再次賦值此時(shí)會(huì)報(bào)錯(cuò)

說一道面試題

var funcs = [];
for (var i = 0; i < 10; i++) {
    funcs.push(function() { console.log(i) })
}
funcs.forEach(function(func) {
    func()
})

這樣的面試題是大家常見，很多同學(xué)一看就知道輸出 10 十次
但是如果我們想依次輸出0到9呢？?jī)煞N解決方法。直接上代碼。

// ES5告訴我們可以利用閉包解決這個(gè)問題
var funcs = [];
for (var i = 0; i < 10; i++) {
    func.push(
        (function(value) {            
            return function() {                
                console.log(value)
            }
        }(i))
    )
}    // es6
for (let i = 0; i < 10; i++) {
    func.push(function() {            
        console.log(i)
    })
}

達(dá)到相同的效果，es6簡(jiǎn)潔的解決方案是不是更讓你心動(dòng)！??！

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

第一個(gè)用途，基本的字符串格式化。將表達(dá)式嵌入字符串中進(jìn)行拼接。用${}來界定。

//es5 
var name = "lux"
console.log("hello" + name)    //es6
const name = "lux"
console.log(`hello ${name}`) //hello lux

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

// es5
var msg = "Hi 
man!
"
// es6
const template = `
hello world
`

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

// 1.includes：判斷是否包含然后直接返回布爾值
let str = "hahay"
console.log(str.includes("y")) // true
// 2.repeat: 獲取字符串重復(fù)n次
let s = "he"
console.log(s.repeat(3)) // "hehehe"
//如果你帶入小數(shù), Math.floor(num) 來處理

函數(shù)默認(rèn)參數(shù)

在ES5我們給函數(shù)定義參數(shù)默認(rèn)值是怎么樣？

function action(num) {
    num = num || 200
    //當(dāng)傳入num時(shí)，num為傳入的值
    //當(dāng)沒傳入?yún)?shù)時(shí)，num即有了默認(rèn)值200
    return num
}

但細(xì)心觀察的同學(xué)們肯定會(huì)發(fā)現(xiàn)，num傳入為0的時(shí)候就是false， 此時(shí)num = 200 與我們的實(shí)際要的效果明顯不一樣

ES6為參數(shù)提供了默認(rèn)值。在定義函數(shù)時(shí)便初始化了這個(gè)參數(shù)，以便在參數(shù)沒有被傳遞進(jìn)去時(shí)使用。

function action(num = 200) {
    console.log(num)
}
action() //200
action(300) //300

箭頭函數(shù)

ES6很有意思的一部分就是函數(shù)的快捷寫法。也就是箭頭函數(shù)。

箭頭函數(shù)最直觀的三個(gè)特點(diǎn)。

不需要function關(guān)鍵字來創(chuàng)建函數(shù)
省略return關(guān)鍵字
繼承當(dāng)前上下文的 this 關(guān)鍵字
//例如：

[1,2,3].map( x => x + 1 )//等同于：
[1,2,3].map((function(x){
    return x + 1
}).bind(this))

說個(gè)小細(xì)節(jié)。

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

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

作為參考

var people = (name, age) => {        
    const fullName = "h" + name;
    return fullName
} 
//如果缺少()或者{}就會(huì)報(bào)錯(cuò)

對(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: "lux",
    age: 20
}
const name = people.name
const age = people.age
console.log(name + " --- " + age)

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

//對(duì)象
const people = {
    name: "lux",
    age: 20
}    
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"

ES6中另外一個(gè)好玩的特性就是Spread Operator 也是三個(gè)點(diǎn)兒...接下來就展示一下它的用途。

組裝對(duì)象或者數(shù)組

//數(shù)組
const color = ["red", "yellow"]    
const colorful = [...color, "green", "pink"]
console.log(colorful) //[red, yellow, green, pink]

//對(duì)象
const alp = { fist: "a", second: "b"}    
const alphabets = { ...alp, third: "c" }
console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"}

有時(shí)候我們想獲取數(shù)組或者對(duì)象除了前幾項(xiàng)或者除了某幾項(xiàng)的其他項(xiàng)

//數(shù)組    
const number = [1,2,3,4,5]    
const [first, ...rest] = number
console.log(rest) //2,3,4,5
//對(duì)象    
const user = {
    username: "lux",
    gender: "female",
    age: 19,
    address: "peking"
}    
const { username, ...rest } = user
console.log(rest) //{"address": "peking", "age": 19, "gender": "female"}

對(duì)于 Object 而言，還可以用于組合成新的 Object 。(ES2017 stage-2 proposal) 當(dāng)然如果有重復(fù)的屬性名，右邊覆蓋左邊

const first = {        
    a: 1,        
    b: 2,
    c: 6,
}
const second = {
    c: 3,
    d: 4
}
const total = { ...first, ...second }
console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

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

//全部導(dǎo)入import people from "./example"http://有一種特殊情況，即允許你將整個(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"http:// 導(dǎo)出默認(rèn), 有且只有一個(gè)默認(rèn)export default App// 部分導(dǎo)出export class App extend Component {};

以前有人問我，導(dǎo)入的時(shí)候有沒有大括號(hào)的區(qū)別是什么，下面是我在工作中的總結(jié)：
1.當(dāng)用export default people導(dǎo)出時(shí)，就用 import people 導(dǎo)入（不帶大括號(hào)）
2.一個(gè)文件里，有且只能有一個(gè)export default。但可以有多個(gè)export。
3.當(dāng)用export name 時(shí)，就用import { name }導(dǎo)入（記得帶上大括號(hào)）
4.當(dāng)一個(gè)文件里，既有一個(gè)export default people, 又有多個(gè)export name 或者 export age時(shí)，導(dǎo)入就用 import people, { name, age }
5.當(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ò)展性。
說白了就是用同步的方式去寫異步代碼。

發(fā)起異步請(qǐng)求

fetch("/api/todos")
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

今天看到一篇關(guān)于面試題的很有意思。

setTimeout(function() {      
    console.log(1)
}, 0);    
new Promise(function executor(resolve) {      
    console.log(2);      
    for( var i=0 ; i<10000 ; i++ ) {
        i == 9999 && resolve();
    }      
    console.log(3);
}).then(function() {      
    console.log(4);
});    
console.log(5);

當(dāng)然以上promise的知識(shí)點(diǎn)，這個(gè)只是冰山一角。需要更多地去學(xué)習(xí)應(yīng)用。

生成器（ 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ù)吐票。

OK。說說迭代器。當(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é)束。
總結(jié)

ES6的特性遠(yuǎn)不止于此，但對(duì)于我們?nèi)粘５拈_發(fā)開說。這已經(jīng)是夠夠的了。還有很多有意思的方法。比如findIndex...等等。包括用set來完成面試題?？蛿?shù)組去重問題。我和我的小伙伴們都驚呆了!