1.2 ES 6常用語法簡介

ECMAScript是JavaScript語言標準，ECMAScript又有多個版本，目前我們使用最多的版本是ECMAScript 6，簡稱ES 6，使用最新語法能夠帶給我們更順暢、更高效的開發體驗。正因如此，在學習Taro或者React之前，都應該好好學習一下ES 6甚至更新的語法規范，所以本節先整體介紹項目開發中使用最多的一些ES 6語法。

1.2.1 變量定義新方式——let、const

曾經，我們只知道var可以聲明一個變量，并且在項目中大量使用。不知道你是否遇到過類似以下的問題。

1.聲明一個變量后，在下面的代碼中又聲明了一次，程序依然能夠運行

以上代碼在正常情況下的表現差強人意，但如果我們現在在做圓周長的計算，定義了一個變量表示圓周率π，不幸的是同事也使用了這個變量名。

在理想情況下，我們這樣定義變量：

如果同事在開發過程中，也定義了相同的變量名，則會出錯。例如：

在這個需求里，任何時候都不希望PI的值發生改變，這樣的值在程序中被稱為常量，在ES6中使用const聲明即可。如果在后面的代碼中，const聲明的變量值被修改，則會拋出錯誤，從而提示開發者。

2.定義變量前使用這個變量，不會報錯，而是會告訴你它是undefined

這個問題在面試中也會經常被問及，原因是var聲明的變量會被提升至作用域頂端，我們把這個特性叫作變量提升。這個特性會在開發過程中引入很多問題，因此不建議使用，我們可以使用let或const聲明變量來規避這個問題。

3.作用域問題

關于作用域問題，有一個很經典的例子。我們通常使用setTimeout定時器來定義一個期望在未來執行的操作，代碼如下：

執行以上代碼，我們期望在1s后，打印從0到4這5個數字，但最終輸出的結果卻是5個5，為什么呢？其實問題出在作用域上，我們可以使用let聲明變量，從而生成一個暫時性死區，來解決這個問題。代碼示例如下：

1.2.2 告別字符串拼接——模板字符串

模板字符串是對字符串的增強，使用模板字符串替代普通字符串拼接能提高代碼可讀性。模板字符串使用反引號（`）標識，除了實現字符串拼接，還能在字符串中使用表達式或者已定義的變量，進一步增強字符串能力。例如：

1.2.3 優雅獲取數組或對象中的值——解構賦值

ES 6獲取已定義數組或對象中的屬性更便捷，以前在編寫代碼時，獲取數組或對象中的值的方式如下：

使用解構賦值，可以提升代碼的可讀性。例如：

深層結構的數組或對象一樣可用。例如：

rest元素或屬性解構賦值。例如：

1.2.4 二次元函數——箭頭函數

箭頭函數可以更方便快捷地創建一個函數，并且箭頭函數中的this指向函數定義時所在的上下文環境，規避this指向偏移發生的問題。值得一提的是，不能使用箭頭函數定義構造器。例如：

如果函數體包含多條語句，就需要使用大括號將代碼括起來，并使用return返回函數值。例如：

1.2.5 異步處理——Promise

前端開發時常伴隨異步處理，在過去很長一段時間里，都是使用回調函數處理異步操作。假設我們現在停頓一秒計算1+2得到結果3，而后停頓一秒計算3+4，如果使用回調函數，可能需要這樣編寫：

回調函數嵌套問題如此可見一斑，這個問題叫作回調地獄。為了解決上述問題，ES6引入了可讀性更高的特性支持異步處理，那就是Promise。Promise允許使用鏈式調用方式處理異步隊列。使用Promise重寫上述操作，示例如下：

這樣，嵌套的問題是不是解決了，代碼的可讀性是不是更高了？如果再使用async，就更易讀了，示例如下：

有了這些語法特性，更方便處理異步操作，使用Taro開發項目時也會經常用到這些語法。

1.2.6 面向對象編程——class

以前的JavaScript面向對象編程不純粹，ES 6引入了類的概念，是原型繼承的另一種書寫形式。代碼示例如下：

有了類的概念，就可以輕松實現繼承，例如現在有一個類表示人，我們需要在這個類中派生出一個代表女性的類，使用extends關鍵字即可輕松實現，代碼示例如下：

1.2.7 模塊化——import、export

ES 6實現了模塊化標準，可以使用export導出模塊，import導入模塊。例如：

以上介紹的相關內容是我們在使用Taro開發小程序過程中經常會使用的ES 6語法，如果你想了解更多關于ES 6的語法知識，可自行查閱相關資料學習。