ES6 - 開篇

一些關於es6簡單的介紹與瞭解。初始認知有限，循序完善。

 

ES6：

又叫ES2015，是2015年推出的JavaScript新版本。

相應的，後邊推出的ES七、八、九、10等都依次是上一版本發出後一年的新迭代版本。不過不少還是提案，並不被瀏覽器支持。

如今廣泛使用es六、7，但仍然須要工具進行編譯轉換成es5的語法。這個工具就是babel（後表）。

 

ES6及後邊版本的語言進行迭代的目的：

讓JavaScript愈來愈好用、愈來愈強大，逐漸完善到成爲企業級的開發語言。

 

咱們爲何要學習ES6：【優勢】

語言迭代天然是彌補以前語言的不足，或者讓原有語言更加規範、更加簡便易用。

因此ES6在原有基礎上增長了一些語法糖，引入了一些新特性。使得es更加規範、易操做，簡化了項目的複雜程度，下降出錯率，提升開發效率。

以let出現來講，就是由於js沒有塊級做用域的概念，新人使用常常遇到的一個出錯點就像下邊這樣的代碼：

【也是面試高頻的埋雷題】

請問點擊每個li，打印的是什麼？

若是想點擊li輸出對應的索引要怎麼改？

這個問題對於學到這裏的咱們應該很easy了，由於i是全局的，因此打印i的時候會取window上的i，此時for循環完i就是li.length的值。即不管點擊哪一個li，獲得的結果都是同一個數。

平時咱們解決時，可能會建立一個當即執行函數包裹住click事件的綁定，存儲不一樣的i值到不一樣的函數做用域中，最後利用閉包的原理輸出不一樣的i值以實現打印索引的需求。

 

這也就暴露了var聲明變量的弱點。因此就有了let的出現。

使用let咱們輕鬆修改，就能達到上邊的需求：

相對上邊的代碼只改了一個單詞，不能夠說es6很差用。

 

 

不足：

由於低版本瀏覽器的不支持，就須要Babel工具進行轉換。

感覺一下：一樣是上邊那段使用let的代碼（圖三），

 

通過babel編譯成es5語言後，實現了咱們須要的功能。可是咱們開發的時候只須要寫let就能夠了，仍是灰常方便的。

能夠看出編譯後的原理仍是利用了函數做用域和閉包[/偷笑]

 

babel的基礎配置見下篇。