什么是Es6？
新一代的javascript也被稱為ECMAScript 6(也稱為 ES6 or Harmony)懂诗。因為當前版本的ES6是在2015年發(fā)布的鹰晨，所以又稱ECMAScript 2015绿淋。
目前雖然并不是所有瀏覽器都能兼容ES6全部特性闷畸，但越來越多的程序員在實際項目當中已經開始使用ES6了。
根據各大牛們的建議在學習ES6語法之前吞滞，最好還是先了解下Babel佑菩。
這里的Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼裁赠，從而使其在現(xiàn)有環(huán)境執(zhí)行殿漠。這里可以選擇自己習慣的工具來使用Babel，具體過程可直接在Babel官網查看组贺。
最常用的ES6特性（先囫圇吞棗的學習了前5個特性）
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments這些是ES6最常用的幾個語法凸舵。
let, const這兩個的用途與var類似，都是用來聲明變量的失尖，但在實際運用中還是有不同的啊奄。
如：
var ? ? name ='hao' ? ? ?
while(true) {
var? name ='hao1'
console.log(name)//hao1
break
}
console.log(name)//hao1
使用var兩次輸出都是hao1，這是因為ES5只有全局作用域和函數作用域掀潮，沒有塊級作用域菇夸，這帶來很多不合理的場景。第一種場景就是你現(xiàn)在看到的內層變量覆蓋外層變量仪吧。而let則實際上為JavaScript新增了塊級作用域庄新。用它所聲明的變量，只在let命令所在的代碼塊內有效薯鼠。比如：
let ? ?name ='hao'
while(true) {
let? name ='hao1'
console.log(name)//hao1
break
}
console.log(name)//hao
另外一個var帶來的不合理場景就是用來計數的循環(huán)變量泄露為全局變量如：
var a = [];
for( var i =0; i <10; i++) {?
?a[i] =function(){
console.log(i);??
};}
a[6]();// 10
上面代碼中择诈，變量i是var聲明的，在全局范圍內都有效出皇。所以每一次循環(huán)羞芍，新的i值都會覆蓋舊值，導致最后輸出的是最后一輪的i的值郊艘。而使用let則不會出現(xiàn)這個問題荷科。
var a = [];
for(let i =0; i <10; i++) {
? a[i] =function(){
console.log(i);?
?};}
a[6]();// 6
當然如果不用ES6唯咬，也能用閉包如何解決這個問題。
const也用來聲明變量畏浆，但是聲明的是常量胆胰。一旦聲明，常量的值就不能改變刻获。當我們嘗試去改變用const聲明的常量時蜀涨，瀏覽器就會報錯。
class, extends, super這三個特性涉及了ES5中的幾個部分：原型将鸵、構造函數勉盅，繼承佑颇。
ES6提供了更接近傳統(tǒng)語言的寫法顶掉，引入了Class（類）。新的class寫法讓對象原型的寫法更加清晰挑胸、更像面向對象編程的語法痒筒，也更加通俗易懂。如：
class Animal{
constructor(){
this.type ='animal'
}? ??
says(say){
console.log(this.type +' says '+ say)? ?
?}}
let ?animal =newAnimal()
animal.says('hello')//animal says hello
class Cat extends Animal{
constructor(){
super()
this.type ='cat'
}
}
let cat =newCat()
cat.says('hello')//cat says hello
上面代碼首先用class定義了一個“類”茬贵，可以看到里面有一個constructor方法簿透，這就是構造方法，而this關鍵字則代表實例對象解藻。簡單地說老充，constructor內定義的方法和屬性是實例對象自己的，而constructor外定義的方法和屬性則是所有實例對象可以共享的螟左。
Class之間可以通過extends關鍵字實現(xiàn)繼承啡浊，這比ES5的通過修改原型鏈實現(xiàn)繼承，要清晰和方便很多胶背。上面定義了一個Cat類巷嚣，該類通過extends關鍵字，繼承了Animal類的所有屬性和方法钳吟。
super關鍵字廷粒，它指代父類的實例（即父類的this對象）。子類必須在constructor方法中調用super方法红且，否則新建實例時會報錯坝茎。這是因為子類沒有自己的this對象，而是繼承父類的this對象暇番，然后對其進行加工嗤放。如果不調用super方法，子類就得不到this對象奔誓。
ES6的繼承機制斤吐，實質是先創(chuàng)造父類的實例對象this（所以必須先調用super方法）搔涝，然后再用子類的構造函數修改this。
arrow function 這個是ES6最最常用的一個新特性了和措，用它來寫function比原來的寫法要簡潔清晰很多如:
function(i){
return i +1;?
}//ES5
(i) => i +1//ES6
驚訝吧庄呈？簡單吧？一個=>符號就解決了派阱。如果比較復雜的诬留，則需要用{}把代碼包起來就好了：
function(x, y){?
?? x++;? ?
?y--;
return x + y;
}//ES5
(x, y) => {x++; y--;return x+y}//ES6
template string插入大段的html內容到文檔 如：
$("#result").append(
"There are <b>"+ basket.count +"?</b>"+
"items in your basket, "+
"<em>"+ basket.onSale +"</em> are on sale!"
);//ES5
而使用ES6的新特性模板字符串``后，我們可以直接這么來寫：
$("#result").append(
`? There are${basket.count}items
? in your basket,<em>${basket.onSale}</em>
are on sale!`);
用反引號（\）來標識起始贫母，用${}`來引用變量文兑，而且所有的空格和縮進都會被保留在輸出之中.
destructuring ES6允許按照一定模式，從數組和對象中提取值腺劣，對變量進行賦值绿贞，這被稱為解構（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是默認值橘原。直接例子可能更容易理解些
function animal(type){ ? ? ? ? //調用animal方法
type=type||'cat' ? ? ? ? ? ? ? ? ? //type 的默認值的寫法 ??
console.log(type)
}
animal()
Es6中的寫法就是直接些了
function animal(type='cat'){ ? ? ? ? ? ?//Es6
?? console.log(type)
}
animal()
rest語法
function animals(...types){? ? ? ? ? ? ? ? //Es6
console.log(types)
}
animals('cat','dog','fish') ? ? ? //["cat","dog","fish"] ? ? ?
而如果不用ES6的話籍铁，我們則得使用ES5的arguments。
學習了個大概下也參考了一些大牛的文檔趾断，懵懵懂懂的了解些拒名。。芋酌。增显。。脐帝。還是有些好多地方不懂同云，學無止境。
