剛開始用Vue或者React，很多時候我們都會把ES6+這位大兄dei加入我們的技術(shù)棧中。但是ES6+那么多那么多新特性戳杀，我們真的需要全部都掌握嗎该面？秉著二八原則，掌握好常用的信卡、有用的隔缀，這個可以讓我們的開發(fā)快速起飛值纱。

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

1.變量聲明 const 和 let

在ES6之前瘤礁，我們都是用 var 關(guān)鍵字聲明變量暇咆。無論聲明在何處，都會被視為聲明在函數(shù)的最頂部(不在函數(shù)內(nèi)即在全局作用域的最頂部)锅铅。這就是函數(shù)變量提升 例如：

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

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

  function aa() {
    var test // 變量提升草娜，函數(shù)最頂部
    if(flag) {
        test = 'hello man'
    } else {
        //此處訪問 test 值為 undefined
        console.log(test)
    }
    //此處訪問 test 值為 undefined
  }

所以不用關(guān)心 flag 是否為 true or false陪踩。實(shí)際上咐低，無論如何 test 都會被創(chuàng)建聲明揽思。

接下來ES6主角登場：
我們通常用 let 和 const 來聲明，let 表示變量见擦、const 表示常量绰更。let 和 const 都是塊級作用域。怎么理解這個塊級作用域锡宋？

• 在一個函數(shù)內(nèi)部
• 在一個代碼塊內(nèi)部

說白了，只要在 {}花括號內(nèi) 的代碼塊即可以認(rèn)為 let 和 const 的作用域特恬。

看以下代碼：

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

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

再來說說 const
const 聲明的變量必須提供一個值癌刽，而且會被認(rèn)為是常量役首，意思就是它的值被設(shè)置完成后就不能再修改了。

    const name = 'cc'
    name = 'yy' // 再次賦值此時會報(bào)錯

還有显拜，如果 const 的是一個對象衡奥，對象所包含的值是可以被修改的。抽象一點(diǎn)兒說远荠，就是對象所指向的地址不能改變矮固，而變量成員是可以修改的。

看以下例子就非常清楚：

    const student = { name: 'cc' }
    
    student.name = 'yy' // 修改變量成員譬淳，一點(diǎn)兒毛病沒有
    
    student  = { name: 'yy' } // 修改變量綁定档址，這樣子就會報(bào)錯了

說說TDZ(暫時性死區(qū))，想必你早有耳聞邻梆。

    {
        console.log(value) // 報(bào)錯
        let value = 'lala'
    }

我們都知道守伸，JS引擎掃描代碼時，如果發(fā)現(xiàn)變量聲明浦妄，使用的是 var 聲明變量時會將聲明的變量提升到函數(shù)或全局作用域的頂部尼摹。但是 let 或者 const见芹，會將聲明的變量關(guān)進(jìn)一個小黑屋也是TDZ（暫時性死區(qū)），只有執(zhí)行到變量聲明這句語句時蠢涝，變量才會從小黑屋被放出來玄呛，才能安全使用這個變量。

哦了惠赫，咱們說一道面試題把鉴！

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

這樣的面試題是大家很常見，很多同學(xué)一看就知道輸出十次10
但是如果我們想依次輸出0到9呢儿咱？
有兩種解決方法庭砍，直接看一下代碼：

    // ES5知識，我們可以利用“立即調(diào)用函數(shù)”解決這個問題
    var funcs = []
    for (var i = 0; i < 10; i++) {
        funcs.push(
          (function(value) {
            return function() {
                console.log(value)
            }
        })(i)
      )
    }
    funcs.forEach(function(func) {
        func()
    })

  // 再來看看es6怎么處理的
    const funcs = []
    for (let i = 0; i < 10; i++) {
        funcs.push(() => console.log(i))
    }
    funcs.forEach(func => func())

達(dá)到相同的效果混埠，ES6 簡潔的解決方案是不是更讓你心動５「住！钳宪！

2.字符串

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

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

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

第二個用途疚俱，在ES5時我們通過反斜杠(\)來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定缩多。

    // ES5
    var msg = "Hi \
    man!
    "
    // ES6
    const template = `<div>
        <span>hello world</span>
    </div>`

對于字符串 ES6+ 當(dāng)然也提供了很多厲害也很有意思的方法?? 說幾個常用的呆奕。

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

    // 2.repeat: 獲取字符串重復(fù)n次
    const str = 'he'
    console.log(str.repeat(3)) // 'hehehe'
    //如果你帶入小數(shù), Math.floor(num) 來處理
    // s.repeat(3.1) 或者 s.repeat(3.9) 都當(dāng)做成 s.repeat(3) 來處理

    // 3. startsWith 和 endsWith 判斷是否以 給定文本 開始或者結(jié)束
    const str =  'hello world!'
    console.log(str.startsWith('hello')) // true
    console.log(str.endsWith('!')) // true
    
    // 4. padStart 和 padEnd 填充字符串，應(yīng)用場景：時分秒
    setInterval(() => {
        const now = new Date()
        const hours = now.getHours().toString()
        const minutes = now.getMinutes().toString()
        const seconds = now.getSeconds().toString()
        console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
    }, 1000)

關(guān)于模板字符串現(xiàn)在比較常出現(xiàn)的面試題有兩道衬吆。同學(xué)們不妨寫試試看梁钾？

• 模擬一個模板字符串的實(shí)現(xiàn)。

    let address = '北京海淀區(qū)'
    let name = 'lala'
    let str = '${name}在${address}上班...'
    // 模擬一個方法 myTemplate(str) 最終輸出 'lala在北京海淀區(qū)上班...'
    function myTemplate(str) {
        // try it
    }
    console.log(myTemplate(str)) // lala在北京海淀區(qū)上班...

• 實(shí)現(xiàn)標(biāo)簽化模板(自定義模板規(guī)則)逊抡。

    const name = 'cc'
    const gender = 'male'
    const hobby = 'basketball'
    // 實(shí)現(xiàn)tag最終輸出 '姓名：**cc**姆泻，性別：**male**，愛好：**basketball**'
    function tag(strings) {
        // do it
    }
    const str = tag`姓名：${name}冒嫡，性別：${gender}麦射，愛好：${hobby}`
    console.log(str) // '姓名：**cc**，性別：**male**灯谣，愛好：**basketball**'

3.函數(shù)

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

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

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

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

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

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

箭頭函數(shù)

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

箭頭函數(shù)最直觀的三個特點(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))

說個小細(xì)節(jié)方面。

當(dāng)你的函數(shù)有且僅有一個參數(shù)的時候放钦，是可以省略掉括號的。當(dāng)你函數(shù)返回有且僅有一個表達(dá)式的時候可以省略{} 和 return恭金；例如:

    var people = name => 'hello' + name
    //參數(shù)name就沒有括號

作為參考

    var people = (name, age) => {
        const fullName = 'hello' + name
        return fullName
    } 
    //如果缺少()或者{}就會報(bào)錯

要不整一道筆試題操禀？哈哈哈哈哈哈哈哈。我不管我先上代碼了

    // 請使用ES6重構(gòu)以下代碼
    
    var calculate = function(x, y, z) {
      if (typeof x != 'number') { x = 0 }
      if (typeof y != 'number') { y = 6 }

      var dwt = x % y
      var result

      if (dwt == z) { result = true }
      if (dwt != z) { result = false }
      
      return result
    }

    const calculate = (x, y, z) => {
      x = typeof x !== 'number' ? 0 : x
      y = typeof y !== 'number' ? 6 : y
      return x % y === z
    }

4.拓展的對象功能

對象初始化簡寫

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

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

鍵值對重名，ES6可以簡寫如下：

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

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

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

ES6通過省略冒號與 function 關(guān)鍵字揪惦，將這個語法變得更簡潔

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

ES6 對象提供了 Object.assign()這個方法來實(shí)現(xiàn)淺復(fù)制。
Object.assign() 可以把任意多個源對象自身可枚舉的屬性拷貝給目標(biāo)對象罗侯，然后返回目標(biāo)對象丹擎。第一參數(shù)即為目標(biāo)對象。在實(shí)際項(xiàng)目中歇父，我們?yōu)榱瞬桓淖冊磳ο蟆Ｒ话銜涯繕?biāo)對象傳為{}

    const objA = { name: 'cc', age: 18 }
    const objB = { address: 'beijing' }
    const objC = {} // 這個為目標(biāo)對象
    const obj = Object.assign(objC, objA, objB)

    // 我們將 objA objB objC obj 分別輸出看看
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }

    // 是的再愈，目標(biāo)對象ObjC的值被改變了榜苫。
    // so，如果objC也是你的一個源對象的話翎冲。請?jiān)趏bjC前面填在一個目標(biāo)對象{}
    Object.assign({}, objC, objA, objB)

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

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

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

    const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

是不是覺得很熟悉驹饺，沒錯，在ES6之前我們就是這樣獲取對象信息的缴渊，一個一個獲取∩鸵迹現(xiàn)在，解構(gòu)能讓我們從對象或者數(shù)組里取出數(shù)據(jù)存為變量衔沼，例如

    //對象
    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'

要不來點(diǎn)兒面試題蝌借，看看自己的掌握情況昔瞧？

    // 請使用 ES6 重構(gòu)一下代碼

    // 第一題
    var jsonParse = require('body-parser').jsonParse

    // 第二題
    var body = request.body
    var username = body.username
    var password = body.password

    // 1.
    import { jsonParse } from 'body-parser'
    // 2. 
    const { body, body: { username, password } } = request

6.Spread Operator 展開運(yùn)算符

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

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

    //數(shù)組
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //對象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}

有時候我們想獲取數(shù)組或者對象除了前幾項(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
    //對象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}

對于 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 }

7.import 和 export

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

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

//有一種特殊情況酬荞，即允許你將整個模塊當(dāng)作單一對象進(jìn)行導(dǎo)入
//該模塊的所有導(dǎo)出都會作為對象的屬性存在
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), 有且只有一個默認(rèn)
export default App

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

以前有人問我，導(dǎo)入的時候有沒有大括號的區(qū)別是什么瞧哟。下面是我在工作中的總結(jié)：

1.當(dāng)用export default people導(dǎo)出時混巧，就用 import people 導(dǎo)入（不帶大括號）

2.一個文件里，有且只能有一個export default绢涡。但可以有多個export牲剃。

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

4.當(dāng)一個文件里雄可，既有一個export default people, 又有多個export name 或者 export age時凿傅，導(dǎo)入就用 import people, { name, age } 

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

8. Promise

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

說白了就是用同步的方式去寫異步代碼。

發(fā)起異步請求

    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);

Excuse me宏怔？這個前端面試在搞事！

當(dāng)然以上promise的知識點(diǎn)畴椰，這個只是冰山一角臊诊。需要更多地去學(xué)習(xí)了解一下。

9.Generators

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

這里生活中有一個比較形象的例子壶硅。咱們到銀行辦理業(yè)務(wù)時候都得向大廳的機(jī)器取一張排隊(duì)號威兜。你拿到你的排隊(duì)號，機(jī)器并不會自動為你再出下一張票庐椒。也就是說取票機(jī)“暫徒范妫”住了，直到下一個人再次喚起才會繼續(xù)吐票约谈。

OK笔宿。說說迭代器。當(dāng)你調(diào)用一個generator時棱诱，它將返回一個迭代器對象泼橘。這個迭代器對象擁有一個叫做next的方法來幫助你重啟generator函數(shù)并得到下一個值。next方法不僅返回值迈勋，它返回的對象具有兩個屬性：done和value炬灭。value是你獲得的值，done用來表明你的generator是否已經(jīng)停止提供值靡菇。繼續(xù)用剛剛?cè)∑钡睦又毓椋繌埮抨?duì)號就是這里的value，打印票的紙是否用完就這是這里的done厦凤。

    // 生成器
    function *createIterator() {
        yield 1;
        yield 2;
        yield 3;
    }
    
    // 生成器能像正規(guī)函數(shù)那樣被調(diào)用鼻吮，但會返回一個迭代器
    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)用對于我們來說是很困難的事椎木，我們的函數(shù)并不會等待異步調(diào)用完再執(zhí)行，你可能會想到用回調(diào)函數(shù)博烂，（當(dāng)然還有其他方案比如Promise比如Async/await）香椎。

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

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

    function run(taskDef) { //taskDef即一個生成器函數(shù)

        // 創(chuàng)建迭代器讼积，讓它在別處可用
        let task = taskDef();

        // 啟動任務(wù)
        let result = task.next();
    
        // 遞歸使用函數(shù)來保持對 next() 的調(diào)用
        function step() {
    
            // 如果還有更多要做的
            if (!result.done) {
                result = task.next();
                step();
            }
        }
    
        // 開始處理過程
        step();
    
    }

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

總結(jié)

ES6新特性遠(yuǎn)不止于此吕朵，但對于我們?nèi)粘５拈_發(fā)來說猎醇。這算不上全部，但是能算得上是高頻使用了努溃。當(dāng)然還有很有好玩有意思的特性硫嘶。比如一些數(shù)組的新方法、class...等等梧税。包括用set處理數(shù)組去重問題等等沦疾。我和我的小伙伴們都驚呆了!

有什么問題，歡迎不吝賜教第队！