ECMAScript 6（以下簡(jiǎn)稱ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)。因?yàn)楫?dāng)前版本的ES6是在2015年發(fā)布的，所以又稱ECMAScript 2015。
并不是所有瀏覽器都兼容ES6的所有特性，但是目前ES6的在項(xiàng)目中的運(yùn)用已經(jīng)原來(lái)越多了，就算不使用ES6也應(yīng)該了解一下E6的語(yǔ)法了
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments????? 這些都是ES6中常用的幾個(gè)語(yǔ)法，學(xué)會(huì)他們就基本不用怕了
let,const
用途個(gè)var類(lèi)似，用來(lái)申明變量的，但在實(shí)際運(yùn)用中他們還有各自的特殊用途 例如：
這是因?yàn)镋S5只有全局作用域和函數(shù)作用域，沒(méi)有塊級(jí)作用域，這樣會(huì)出現(xiàn)內(nèi)層變量覆蓋外層變量的情況。
而let則實(shí)際上為JavaScript新增了塊級(jí)作用域。用它所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。
const也用來(lái)聲明變量，但是聲明的是常量。一旦聲明，常量的值就不能改變。
class, extends, super
這三個(gè)特性涉及了ES5中最令人頭疼的的幾個(gè)部分：原型、構(gòu)造函數(shù)，繼承
ES6提供了更接近傳統(tǒng)語(yǔ)言的寫(xiě)法，引入了Class（類(lèi)）這個(gè)概念。新的class寫(xiě)法讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法，也更加通俗易懂。
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
上面代碼首先用class定義了一個(gè)“類(lèi)”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。簡(jiǎn)單地說(shuō)，constructor內(nèi)定義的方法和屬性是實(shí)例對(duì)象自己的，而constructor外定義的方法和屬性則是所有實(shí)例對(duì)象可以共享的。
Class之間可以通過(guò)extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過(guò)修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。上面定義了一個(gè)Cat類(lèi)，該類(lèi)通過(guò)extends關(guān)鍵字，繼承了Animal類(lèi)的所有屬性和方法。
super關(guān)鍵字，它指代父類(lèi)的實(shí)例（即父類(lèi)的this對(duì)象）。子類(lèi)必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)。這是因?yàn)樽宇?lèi)沒(méi)有自己的this對(duì)象，而是繼承父類(lèi)的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類(lèi)就得不到this對(duì)象。
ES6的繼承機(jī)制，實(shí)質(zhì)是先創(chuàng)造父類(lèi)的實(shí)例對(duì)象this（所以必須先調(diào)用super方法），然后再用子類(lèi)的構(gòu)造函數(shù)修改this。
arrow function
這個(gè)恐怕是ES6最最常用的一個(gè)新特性了，用它來(lái)寫(xiě)function比原來(lái)的寫(xiě)法要簡(jiǎn)潔清晰很多:
function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6
簡(jiǎn)直是簡(jiǎn)單的不像話對(duì)吧...
如果方程比較復(fù)雜，則需要用{}把代碼包起來(lái)：
function(x, y) {
? ? x++;
? ? y--;
? ? return x + y;
}
(x, y) => {x++; y--; return x+y}
template string
這個(gè)東西也是非常有用，當(dāng)我們要插入大段的html內(nèi)容到文檔中時(shí)，傳統(tǒng)的寫(xiě)法非常麻煩，所以之前我們通常會(huì)引用一些模板工具庫(kù)，比如mustache等等。
$("#result").append(
? "There are <b>" + basket.count + "</b> " +
? "items in your basket, " +
? "<em>" + basket.onSale +
? "</em> are on sale!"
);
我們要用一堆的'+'號(hào)來(lái)連接文本與變量，而使用ES6的新特性模板字符串``后，我們可以直接這么來(lái)寫(xiě)：
? $("#result").append(`
? There are <b>${basket.count}</b> items
? in your basket, <em>${basket.onSale}</em>
? are on sale!
`);
用${}`來(lái)引用變量
destructuring
ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。
看下面的例子：
let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo)? //Object {cat: "ken", dog: "lili"}
使用ES6
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo)? //Object {cat: "ken", dog: "lili"}
default, rest
default很簡(jiǎn)單，意思就是默認(rèn)值。調(diào)用animal()方法時(shí)忘了傳參數(shù)，傳統(tǒng)的做法就是加上這一句type = type || 'cat' 來(lái)指定默認(rèn)值。
function animal(type){
? ? type = type || 'cat'?
? ? console.log(type)
}
animal()
如果用ES6我們而已直接這么寫(xiě)：
function animal(type = 'cat'){
? ? console.log(type)
}
animal()
總結(jié)
以上就是ES6最常用的一些語(yǔ)法，可以說(shuō)這20%的語(yǔ)法，在ES6的日常使用中占了80%
