ECMAScript6簡稱ES6是在2015年發布的，又稱ES2015
Babel是一個ES6轉換器，可以將ES6代碼轉換為ES5代碼并在現有環境中執行。
最常用的ES6特性包括let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
let const
用于聲明變量，類似于var
ES5中只有函數作用域和全局作用域，沒有塊級作用域，塊內同名變量會覆蓋外層變量。let聲明的兩個用處：
- 具有塊級作用域，不會改變塊外同名的變量值
- 防止循環技術的變量泄露為全局變量帶來意向不到的結果
下面的例子，第一個把塊內var改為let，第二個把i聲明改用let，即可得到期望結果
var name = 'zach'
while (true) {
var name = 'obama'
console.log(name) //obama
break
}
console.log(name) //obama
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
const用來聲明常量，值不可改變
class extends super
引入class概念，對象原型寫法更清晰
class通過extends可以繼承
super代表父類的實例，子類必須在constructor中調用super方法，子類沒有this對象，需要繼承父類的this對象。
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
constructor(){
super()
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //cat says hello
arrow function
兩點好處，一簡單方便，二對象中使用this更放心
- 簡單方便
function(x, y) {
x++;
y--;
return x + y;
}//ES5
(x, y) => {x++; y--; return x+y}//ES6
- this問題
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
setTimeout(function(){
console.log(this.type + ' says ' + say)
}, 1000)
}
}
var animal = new Animal()
animal.says('hi') //undefined says hi
以上會報錯，因為setTimeout中的this是全局對象。解決方法把setTimeout替換成下面的
setTimeout( () => {
console.log(this.type + ' says ' + say)
}, 1000)
箭頭函數沒有自己的this，它的this是繼承外面的。
template string
ES5中，組織html內容時，需要用到很多的+連接文本和變量，ES6中使用可以直接使用模板特性來寫，用${}`來引用變量。
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
destructuring
中文名解構，按照一定的模式從數組和對象中提取值，對變量進行賦值
- 賦值
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog} //相當于let zoo = {cat: cat, dog: dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}
- 取值
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many) //animal 2
default rest
ES6在function中可以直接給函數賦默認值
function animal(type = 'cat'){
console.log(type)
}
animal()
rest參數和一個變量名搭配使用，生成一個數組，用于獲取函數多余的參數
function input(...params){
console.log(params)
}
input(1,2,3,4) //[1,2,3,4]
function input2(a,b,...params){
console.log(params)
}
input2(1,2,3,4) //[3,4]
import export
ES6中第一次加入了模塊功能，取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。
export
一個模塊是一個獨立的文件，如果希望外部能讀取文件內的某個變量，必須使用export將變量輸出，輸出有兩種方式：
- 在變量聲明時輸出
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
- 在文件末尾同統一輸出（推薦）
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
export除了輸出變量，還可以輸出函數和類
輸出時可以通過as給輸出量設置輸出名
export輸出的接口與內部動態綁定，即外部獲取到的是內部的實時值
import
import只能引入文件中export過的變量、函數或對象，可以通過as來重命名
import {var1, var2 as newname} from './example.js'
import會執行所加載的模塊，import 'a_module'，但多次import只會執行一次。
參考資料
https://segmentfault.com/a/1190000004365693
http://es6.ruanyifeng.com/#docs/module
