1.箭頭函數(shù)

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

1.不需要function關(guān)鍵字來(lái)創(chuàng)建函數(shù)
2.省略return關(guān)鍵字
3.繼承當(dāng)前上下文的 this 關(guān)鍵字

var arr = [1,2,3];

//es5寫法
arr.map(function(x){
      return x+1;
})

//es6
arr.map(x => x+1);

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

var people = name => 'Hello ' + name;
等同于
var people = function(name){
      return "Hello " + name;
}
而當(dāng)參數(shù)有兩個(gè)或者兩個(gè)以上的時(shí)候就不能省略括號(hào)了,不然會(huì)報(bào)錯(cuò).
var people = (name, age) => {
        const fullName = 'h' + name
        return fullName
} 

2.擴(kuò)展的對(duì)象功能

ES6 對(duì)象提供了Object.assign()這個(gè)方法來(lái)實(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)

ES5中的對(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
        };
    }

ES5為對(duì)象添加方法：

const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }
//es6通過(guò)省略冒號(hào)與 function 關(guān)鍵字，將這個(gè)語(yǔ)法變得更簡(jiǎn)潔
const people = {
        name:"lux",
        getName(){
            console.log(this.name)
      }
}

3.更方便的數(shù)據(jù)訪問(wèn)--解構(gòu)

為了簡(jiǎn)化數(shù)據(jù)，es6新增了解構(gòu)，這是將一個(gè)數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過(guò)程

 //es5提取對(duì)象中的信息形式如下:
const people = {
      name:"zhangjing",
      age:24
}
 const name = people.name
 const age = people.age
 console.log(name + ' --- ' + age)

//es6解構(gòu)能讓我們從對(duì)象或者數(shù)組里取出數(shù)據(jù)存為變量
//對(duì)象
const people = {
      name:"Lux",
      age:18
}
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'

4.Spread Operator 展開(kāi)運(yùn)算符

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

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

//對(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 }

5.Generators

生成器（ 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)為你再出下一張票。也就是說(shuō)取票機(jī)“暫?！弊×?，直到下一個(gè)人再次喚起才會(huì)繼續(xù)吐票。

OK。說(shuō)說(shuō)迭代器。當(dāng)你調(diào)用一個(gè)generator時(shí)，它將返回一個(gè)迭代器對(duì)象。這個(gè)迭代器對(duì)象擁有一個(gè)叫做next的方法來(lái)幫助你重啟generator函數(shù)并得到下一個(gè)值。next方法不僅返回值，它返回的對(duì)象具有兩個(gè)屬性：done和value。value是你獲得的值，done用來(lái)表明你的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

在控制臺(tái)打印出iterator,可以看到每次調(diào)用iterator.next()方法的時(shí)候都會(huì)返回一個(gè)對(duì)象，包含value和done兩個(gè)屬性.

image.png

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

圍繞著生成器的許多興奮點(diǎn)都與異步編程直接相關(guān)。異步調(diào)用對(duì)于我們來(lái)說(shuō)是很困難的事，我們的函數(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í)行。

那么問(wèn)題來(lái)了，咱們也不能手動(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ù)來(lái)保持對(duì) next() 的調(diào)用
        function step() {
            // 如果還有更多要做的
            if (!result.done) {
                result = task.next();
                step();
            }
        }
        // 開(kāi)始處理過(guò)程
        step();
    }

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

6.Promise

Promise詳細(xì)解讀

代碼簡(jiǎn)化

//es5
function secret(msg){
      return function(){
            return msg;
      }
}
//es6
let secret = msg => () =>msg;