ECMAScript 8 都發布了，你還沒有用上 ECMAScript 6？

ES8已經與17年6月底發布，而很多的前端開發者還沒有開始用上ES6。本文聊一聊怎麼快速入門ES6，並將ES6的語法應用到實戰項目中。 閱讀全文大約需要15分鐘。文中以 ES 表示 ECMAScript。

今年六月底，TC39發布新一版的ES 8（ES 2017），自從ES6在15年發布之後，每一年TC39都會發布新一版的ES語言標準。

我了解的前端開發者中，還有很多人沒有用上ES6，有的人是覺得ES5用的挺好的，懶得去學ES6，有的人是有想學ES6的決心，但是苦於沒有合適的機會（項目）去實戰練習。

如果你用過React，Vue或Nodejs等，那你多多少少都會使用到一些ES6語法的。

ES8中的新特性，瀏覽器廠商和語法轉換器還需要一段來實現，不如我們還是先聊聊怎麼在你的項目中用上ES6吧。

什麼是ES6？它和ES5有什麼區別？

我們常說的JavaScript是指ES3和ES5，ES6是ECMAScript 6 的縮寫。

對於經常寫原生JavaScript的前端開發者來說，對ES5中的語法肯定比較熟悉，比如數組中的一些方法forEach，map，filter，some，every，indexOf，lastIndexOf，reduce，reduceRight ……，以及對象（Object）和函數（Function）都拓展了很多方法，這裡不多贅敘。

ES6給前端開發者帶來了很多的新的特性，可以更簡單的實現更複雜的操作，很大的提高開發效率，提高代碼的整潔性。

ES6中的新特性有很多，列一些比較常用的特性：

Block-Scoped Constructs Let and Const（塊作用域構造Let and Const）

Default Parameters（默認參數）

Template Literals （模板字元串）

Multi-line Strings （多行字元串）

Arrow Functions （箭頭函數）

Enhanced Object Literals （增強的對象文本）

Promises

Classes（類）

Modules（模塊）

Destructuring Assignment （解構賦值）

下面介紹下這些常用的ES6特性。Block-Scoped Constructs Let and Const（塊作用域構造Let and Const）

ES6提供了兩個新的聲明變數的關鍵字：let和const。而let和const要和塊級作用域結合才能發揮其優勢。

什麼是塊級作用域？

塊級作用域的表示一對大括弧{}包圍的區域是一個獨立的作用域，在這個作用域內用let聲明的變數a，只能在這個作用域內被訪問到，在這對大括弧外面是訪問不到a的。

當然，在塊級作用域中還可以聲明函數，該函數也是只能作用域內部才能被訪問到。所以，在if、else、for甚至是一對單獨的{}，都是一個塊級作用域。

在ES6之前，是沒有塊級作用域的概念的，只有全局作用域和函數作用域兩種，並且，用var聲明的變數和用function聲明的函數會被提前到作用域的頂部，這也就是我們常說的聲明提前。

let

用let聲明的變數是存在於距離聲明語句最近的一個作用域（全局作用域、函數作用域或塊級作用域）內的，在聲明的時候，可選的將其初始化成一個值。

語法如下：

這一點與var的聲明不同，用var聲明的變數是屬於離他最近的一個全局作用域或函數作用域中，且聲明會被提前。在塊級作用域中，var的聲明與在全局作用域和函數作用域中是一樣的。

塊級作用域和let聲明變數，解決了使用var一些痛點，相當於用let聲明的變數不會被提前到作用域頂部。

有一點需要注意，let也是聲明提前,但是let聲明變數的語句必須在使用該變數語句之前，在聲明之前引用會報錯該變數未被聲明，且let不允許重複聲明相同名稱的變數，否則會報錯。我們看下例子：

{ var hello = Hello ; let world = World ; } console.log(hello); console.log(world);

在Chrome瀏覽器的控制台（最新版本的Chrome已支持一部分ES6語法）執行一下，會發現有報錯，見下圖。constconst聲明與let基本相同，它也是存在於塊級作用域內。

有一點區別就是const聲明的是常量，即不可被重新賦值改變原值。需要注意，const在聲明常量的時候，必須同時給常量初始化賦值。如果只聲明，不初始化值的話，會報錯。見下面代碼。

聲明變數的方法在ES5中，可以通過var和function這兩種方法來聲明變數。

而在ES6中，除了增加了let和const兩種聲明方式，還有接下來要介紹的import和class的聲明方式。

默認參數是ES6中對函數拓展的一個特性，可以直接為函數的參數設置默認值，當某一參數設置了默認值時，如果調用函數的時候沒有傳該參數，則該參數的值為默認值，如果傳了該參數，則該參數的值為傳遞的參數值。

在ES6之前，我們可以通過手動的方式，為函數的參數設置默認值，代碼如下：

將上述代碼換成ES6模式，可以這樣寫：

ES6提供了模板字元串的特性，模板字元串是使用反引號（`）和${}實現字元串的拼接，字元串中可以嵌入變數。

在ES6之前，我們一般這樣輸出模板：

var name = Henry ; var welcome = Hello, + name + , Henry!

在ES6中，可以這樣拼接字元串：

let name = Henry ; let welcome = `Hello, ${ name }, Henry

模板字元串的計算規則是在兩個反引號之間將字元串拼接到一起，如果反引號之間含有${}，則會計算這對大括弧內的值，大括弧裡面可以是任意的JavaScript表達式，可以進行運算和引用對象屬性。

多行字元串是模板字元串的拓展，它跟模板字元串是同樣的解析方式，不同的是，它可以拼接多行的字元串，且拼接的字元串中會保留所有的空格和縮進。

如果需要用字元串來拼接DOM樹結構時，可以這樣寫：

上述代碼中，能看到JavaScript代碼和偽html代碼的結合，完全可以將模板字元串的多行字元串封裝成一個頁面模板工具，絕對是輕量高效的。

還有，這種書寫方式是不是很眼熟，跟React的JSX是不是很像雙胞胎啊。

在ES6中，可以使用箭頭（=>）來聲明一個函數，稱作箭頭函數。

ES5中聲明一個函數，可以這樣寫：

var func = function (a) { return a + 2; }

將這個函數換成：

let func = a => a + 2;

如果函數有多個參數，需要用括弧包含所有參數，只有一個參數的時候，可以省略括弧，如果沒有設置參數，也必須有括弧。示例如下：

let func1 = (arg1, arg2, arg3) => { return arg1 + arg2 + arg3; } let func2 = arg => { console.log(arg) } let func3 = () => { console.log(`This is an arrow function.`) }

需要注意的是，箭頭函數沒有自己的this，如果在箭頭函數內部使用this，那樣這個this是箭頭函數外部的this，也是因為箭頭函數沒有this，所以，箭頭函數不能用作構造函數。如果用箭頭函數來寫回調函數時，就不用再將外部this保存起來了。

_this.id); }, 200) } // ES6 function foo() { setTimeout(() => { console.log(`id:${ this.id }`) }, 200) }Enhanced Object Literals （增強的對象文本）

在ES6，對象字面值擴展支持在創建時設置原型，簡寫foo：foo分配，定義方法，加工父函數（super calls），計算屬性名(動態)。總之，這些也帶來了對象字面值和類聲明緊密聯繫起來，讓基於對象的設計得益於一些同樣的便利。

// Shorthand for 『handler: handler』 簡寫 handler, // Methods toString() { // Super calls 繼承 return "d " + super.toString(); }, // Computed (dynamic) property names 計算屬性名 [ prop_ + (() => 42)()]: name };Promises

Promise是非同步編程的一種解決方案，它是一個對象，且只要開始就會一直進行下去，直到成功或者失敗。就像它的字面意思諾言一樣，一個諾言，只要被許下，就只有兩種解決：成功或失敗。

Promise的結果是由非同步操作的結果決定的，且一旦結果形成，便不可再被改變，任何時候都得到同樣的結果。

需要注意的是：Promise被新建後，便無法被取消，會執行下去，直到出現結果；如果不設置回調，Promise內部拋出的異常，不會反應到外部。

語法

參數executorexecutor是一個帶有resolve和reject兩個參數的函數 。

executor 函數在Promise構造函數執行時同步執行，被傳遞resolve和reject函數（executor 函數在Promise構造函數返回新建對象前被調用）。

resolve 和 reject 函數被調用時，分別將promise的狀態改為fulfilled(完成)或rejected（失敗）。executor 內部通常會執行一些非同步操作，一旦完成，可以調用resolve函數來將promise狀態改成fulfilled，或者在發生錯誤時將它的狀態改為rejected。

如果在executor函數中拋出一個錯誤，那麼該promise 狀態為rejected。executor函數的返回值被忽略。

使用Promise非同步載入圖片的例子：

then方法返回的是一個新的Promise實例（注意，不是原來那個Promise實例）。因此可以採用鏈式寫法，即then方法後面再調用另一個then方法。

comments); }, function funcB(err){ console.log("Rejected: ", err); }); // 如果用箭頭函數來寫，會更加簡潔 getJSON("/post/1.json").then( post => getJSON(post.commentURL)) .then( comments => console.log("Resolved: ", comments), err => console.log("Rejected: ", err) );

需要注意的是，catch的調用是按順序來的，如果catch後還有then函數處理時拋出的異常，不會再觸發此catch函數，如要捕獲異常，需要在此then後面再定義一個catch函數來捕獲異常。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！