# ECMAScript 6(ES6)簡介 ## 前言： * 哈嘍小夥伴們，愛說‘廢’話的Z又回來了，歡迎來到Super IT曾的部落格時間，我說啦這個月要帶的福利，說了更的部落格肯定不能水你們，要一起進步學習嘛，今天我就把我學習最經典的Blue的ES6掌握的重點羅列出來，不足的歡迎提問留言。 ## 目錄： 1. 變數 2. 函式 3. 陣列 4. 字串 5. 面向物件 6. Promise 7. generator 8. 模組化 ## 簡介: * 在開張之前我覺得有必要要知道ES6到底是個什麼東西，ES6全名是ECMAScript 6，在2015年6月正式釋出，哇你不要看到2015年覺得知識老舊什麼的，要從基礎的學習才能去掌握它的發展，而且2015也是ES6的一個轉折點，那他是用來幹嘛的呢個人覺得就是把你的程式碼更優美了，更嚴謹了，更簡化了，語言嘛本來就是一種工具，拿官網的話來說ECMScript和JavaScript的關係就是，前者是後者的規格，後者是前者的實現，要看ES6的成長史的建議移步[阮一峰寫的ES6](https://es6.ruanyifeng.com/#docs/intro)，[相容性](https://kangax.github.io/compat-table/es6/)，總之15年的成長史讓它成為了現在前端工程師的必備知識，畢竟到現在IE10+、Chrome、FireFox、移動端、NodeJS都是相容的，不相容怎麼辦呢，比如公司要求老版本的IE也要能使用，那你就有兩個辦法：1.[線上轉換](https://babeljs.io/repl/)（個人不推薦），2.提前編譯。 ```html // 引入browser.js檔案，要我覺得babel==browser.js ``` * 總結： ECMAScript和JavaScript - ECMA是標準，JS是實現 - 類似於HTML5是標準，IE10、Chrome、FF都是實現 - 換句話說，將來也能有其他XXXScript來實現ECMA - ECMAScript簡稱**ECMA或ES** 歷史版本 | 時間 | ECMA | JS | 解釋 | | ------- | ------ | ------ | ------------------------------------------------------------ | | 1996.11 | ES 1.0 | JS穩定 | Netscape將JS提交給ECMA組織，ES正式出現 | | 1998.06 | ES 2.0 | | ES2正式釋出 | | 1999.12 | ES 3.0 | | ES3被廣泛支援 | | 2007.10 | ES 4.0 | | ES4過於激進，被廢了 | | 2008.07 | ES 3.1 | | 4.0退化為嚴重縮水版的3.1
因為吵得太厲害，所以ES 3.1代號為Harmony(和諧) | | 2009.12 | ES 5.0 | | ES 5.0正式釋出
同時公佈了JavaScript.next也就是後來的ES 6.0 | | 2011.06 | ES 5.1 | | ES 5.1成為了ISO國際標準 | | 2013.03 | ES 6.0 | | ES 6.0草案定稿 | | 2013.12 | ES 6.0 | | ES 6.0草案發布 | | 2015.06 | ES 6.0 | | ES 6.0預計釋出正式版
JavaScript.next開始指向ES 7.0 | # ES6變數 ## var與let、const對比： * var大家不陌生吧，宣告變數用的，既然這麼熟了直接對比它的缺點吧： - var典型三大不足 - 可以重複宣告 - 無法限制修改 - 沒有塊級作用域 - let和const的優點 - 不能重複宣告 - const常量能限制修改 - 有塊級作用域 ## var與let、const示例： * 前兩點應該很好理解，比如我在公司寫一個大型專案，那麼多變數，如果用var，萬一重複聲明瞭是不是就會直接給我覆蓋掉呢？答案肯定啊，這就很坑爹了是不是，let重複宣告就直接給你報錯，多好簡單粗暴。 ```html ```  * 第二點就不解釋了你想想π=3.1415926...你就懂了，主要來說第三個，什麼叫塊級作用域呢？{...}，這種大括號括起來的就是了，來一個經典的例子，三個按鈕點選輸出下標。 ```html ``` * 你說輸出什麼？  對，頁面載入a就0,1，2了，然後點選都是3。為啥呢？ ## 閉包 原因是賦值給 onclick 的是閉包，哇，你要問我閉包是個啥？哈，個人建議補一下JS知識，這裡附上[閉包](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures)連結，自己要好好理解喲，閉包也是重要的JS知識掌握點。 然後繼續說，這三個閉包在迴圈中被建立，但他們共享了同一個詞法作用域，在這個作用域中存在一個變數a。這是因為變數a使用var進行宣告，所以具有函式作用域。當onclick的回撥執行時，a的值被決定。由於迴圈在事件觸發之前早已執行完畢,如圖列印的0，1，2，變數物件a（被三個閉包所共享）已經指向了abtn的最後一項。所以都是3。 以前怎麼解決？用閉包把他包裹起來就是，或者用函式工廠這樣就OK了，然後你就會神奇的發現最開始a也列印的0，1，2，但是按鈕正常了，原因就是，所有的回撥不再共享同一個環境， 閉包為每一個回撥建立一個新的詞法環境。在這些環境中，a 就不再恆定都為3了。 ```javascript for (var a = 0; a < abtn.length; a++) { (function(a){ console.log(a); abtn[a].onclick=function(){ alert(a); } })(a) // 馬上把當前迴圈項的a與事件回撥相關聯起來 } ```  * 現在呢？不用這麼麻煩，直接最開始的`var a = 0; `改成`let = 0;`就啥事兒沒有，你就發現0,1，2很自然的就出來了。這裡就相到於開闢了三個程式碼塊，理由也很簡單粗暴，因為let是塊級作用域。 ```html ``` 到這裡，變數完事兒~ ———————————————————————分割線—————— 下節說函式之後的內容 放上我的總部落格[CSDN](https://blog.csdn.net/Z269571627)，[GitHub](https://github.com/269571627/MyGit/tree/web)，主要部落格[部落格園](https://www.cnblogs.com/Three-Z)，[pipe](http://pipe.b3log.org/blo