ES6新手學習知識點整理

阮一峰參考文件：
一、
1.關鍵點：ES2015=ES6
2.最常用的ES6特性
3.ES5只有全域性作用域和函式作用域，沒有塊級作用域，這帶來很多不合理的場景。let則實際上為JavaScript新增了塊級作用域。用它所宣告的變數，只在let命令所在的程式碼塊內有效。
塊級作用域與函式宣告問題：
函式能不能在塊級作用域之中宣告，是一個相當令人混淆的問題。
ES6引入了塊級作用域，明確允許在塊級作用域之中宣告函式。

注意：ES6規定，塊級作用域之中，函式宣告語句的行為類似於let，在塊級作用域之外不可引用。

4.當我們使用箭頭函式時，函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。
並不是因為箭頭函式內部有繫結this的機制，實際原因是箭頭函式根本沒有自己的this，它的this是繼承外面的，因此內部的this就是外層程式碼塊的this
5.ES6的繼承機制，實質是先創造父類的例項物件this（所以必須先呼叫super方法），然後再用子類的建構函式修改this。
6.template string
我們要插入大段的html內容到文件中時，傳統的寫法非常麻煩，所以之前我們通常會引用一些模板工具庫
我們要用一堆的'+'號來連線文字與變數，而使用ES6的新特性模板字串``後，我們可以直接這麼來寫：

$("#result").append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

用反引號（`）來標識起始，用${}來引用變數，而且所有的空格和縮排都會被保留在輸出之中
7.default ,rest
default很簡單，意思就是預設值。大家可以看下面的例子，呼叫animal()方法時忘了傳引數，傳統的做法就是加上這一句type = type || 'cat'來指定預設值。

function animal(type){
    type = type || 'cat'  
    console.log(type)
}
animal()

如果用ES6我們而已直接這麼寫：

function animal(type = 'cat'){
    console.log(type)
}
animal()

最後一個rest語法也很簡單，直接看例子：

function animals(...types){
    console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

二、import export
es6自己的module功能。
們有了es6的module功能，它實現非常簡單，可以成為伺服器和瀏覽器通用的模組解決方案。

ES6 module的其他高階用法
export命令除了輸出變數，還可以輸出函式，甚至是類（react的模組基本都是輸出類）

參考文件：