1.2 ES 6常用語法簡介

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

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

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

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

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

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

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

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

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

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

3.作用域問題

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

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

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

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

1.2.3 優(yōu)雅獲取數(shù)組或?qū)ο笾械闹怠鈽?gòu)賦值

ES 6獲取已定義數(shù)組或?qū)ο笾械膶傩愿憬荩郧霸诰帉懘a時，獲取數(shù)組或?qū)ο笾械闹档姆绞饺缦拢?/p>

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

深層結(jié)構(gòu)的數(shù)組或?qū)ο笠粯涌捎谩＠纾?/p>

rest元素或?qū)傩越鈽?gòu)賦值。例如：

1.2.4 二次元函數(shù)——箭頭函數(shù)

箭頭函數(shù)可以更方便快捷地創(chuàng)建一個函數(shù)，并且箭頭函數(shù)中的this指向函數(shù)定義時所在的上下文環(huán)境，規(guī)避this指向偏移發(fā)生的問題。值得一提的是，不能使用箭頭函數(shù)定義構(gòu)造器。例如：

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

1.2.5 異步處理——Promise

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

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

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

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

1.2.6 面向?qū)ο缶幊獭猚lass

以前的JavaScript面向?qū)ο缶幊滩患兇猓珽S 6引入了類的概念，是原型繼承的另一種書寫形式。代碼示例如下：

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

1.2.7 模塊化——import、export

ES 6實現(xiàn)了模塊化標(biāo)準(zhǔn)，可以使用export導(dǎo)出模塊，import導(dǎo)入模塊。例如：

以上介紹的相關(guān)內(nèi)容是我們在使用Taro開發(fā)小程序過程中經(jīng)常會使用的ES 6語法，如果你想了解更多關(guān)于ES 6的語法知識，可自行查閱相關(guān)資料學(xué)習(xí)。