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

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

1.變數宣告const和let

在ES6之前，我們都是用var關鍵字宣告變數。無論宣告在何處，都會被視為宣告在函式的最頂部(不在函式內即在全域性作用域的最頂部)。這就是函式變數提升例如:

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

以上的程式碼實際上是：

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

所以不用關心bool是否為true or false。實際上，無論如何test都會被建立宣告。

接下來ES6主角登場：
我們通常用let和const來宣告，let表示變數、const

• 在一個函式內部
• 在一個程式碼塊內部

說白了 {}大括號內的程式碼塊即為let 和 const的作用域。

看以下程式碼：

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

let的作用域是在它所在當前程式碼塊，但不會被提升到當前函式的最頂部。

再來說說const
const 宣告的變數都會被認為是常量，意思就是它的值被設定完成後就不能再修改了。

    const name = 'lux'
    name = 'joe' //再次賦值此時會報錯

還有，如果const的是一個物件，物件所包含的值是可以被修改的。抽象一點兒說，就是物件所指向的地址沒有變就行。

    const student = { name: 'cc' }
    // 沒毛病
    student.name = 'yy'
    // 如果這樣子就會報錯了
    student  = { name: 'yy' }

說一道面試題

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

這樣的面試題是大家常見，很多同學一看就知道輸出 10 十次
但是如果我們想依次輸出0到9呢？
有兩種解決方法。直接看一下程式碼。

    // ES5告訴我們可以利用閉包解決這個問題
    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(function() {
            console.log(i)
        })
    }
    funcs.forEach(func => func())

達到相同的效果，es6簡潔的解決方案是不是更讓你心動！！！

2.模板字串

es6模板字元簡直是開發者的福音啊，解決了ES5在字串功能上的痛點。

第一個用途，基本的字串格式化。將表示式嵌入字串中進行拼接。用${}來界定。

    //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當然也提供了很多厲害也很有意思的方法