ECMAScript 6入門

預計在2014年底，ecmascript 6将會正式釋出，他的草案在13年3月份被當機，後續提出新特性将會移至ecmasript

7中。目前還沒有哪款浏覽器實作了es6的全部内容，相容性最強的一款要數firefox了。具體情況可以在檢視。

關于 ecmascript 6 草案，我在部落格裡頭複制了一份，可以點選。

javascript的内容是越來越豐富，在es6中還添加了子產品（module）和類（class），感覺他已經失去了曾經的單純了，不知道這些新功能的補充對開發者來說是福音還是負擔。之前寫過兩篇關于es6的文章， 和 ，本文将一一介紹es6中的一些新特性。

本文位址：，轉載請注明源位址。

注意：如果想測試以下屬性，請安裝 0.11+ 版本的 node，并添加上 --harmony 參數。

這個内容在  一文中已經介紹過了。簡單來說就是一句話：es6中引入了塊級作用域，let的有效區間是他所在的

<code>{}</code> 大括号中。const 為常量，定義之後不能更改，也删除不了。

writable 和 configurable 都是 false。

寫過 coffee-script 的人都知道，我們可以這樣給一個資料指派：

es6中也允許類似的多變量指派：

更強大的是，他還适合對象：

這種指派方式是模式比對的，隻要左側跟右側對應，便可以成功指派。感覺新手不會太适應這種寫法。

先看例子：

這東西隻是簡化了程式設計，沒有從根本上增加功能和特性，寫 coffee 的人應該比較喜歡，我看着還是有點不習慣，其實上面的寫法就等價于：

我想除非是代碼長度有限制，否則這玩意兒正式出來了我也不會用它。

這一塊的内容相當于是給 js 編碼打一個更新檔，這個更新檔用來彌補雙位元組 utf-16

字元帶來的問題，引入的各個函數也隻是對不同場景的修複。這個擴充還是相當重要的，尤其是 arraybuffer 中資料類型的相關處理，涉及到很多類似

float64array uint32array 等類型化數組的處理，我在

曾提到過。

這個地方需要解釋下 javascript 對字元的儲存模式，javascript 中的字元串是以 utf-16 為代碼單元，通常我們使用的字元範圍都在

unicode 值 0x10000 以内，他們對應的 utf-16 就是它們自身，但 unicode 中也存在這個範圍之外的字元，這時候就需要兩個 utf-16

字元來描述，比如：

因為字元串的 length 表示的并不是字元個數，而是 utf-16 的單元個數。關于這方面知識的具體介紹，可以戳。

es6提供了 codepointat 函數來正确處理 4 個位元組儲存的字元。

codepointat 會把 s 中的兩個字元都正确解析出來，相當于智能的将儲存單元切換為 2 或者 4.

對應 string.fromcharcode 的能夠智能解析 s 的函數是 string.fromcodepoint

我們知道可以使用 \u0000-\uffff 來表示一個 unicode 字元，依然是上面的問題，如果字元超出了這個範圍，比如 "\u10000"

這個字元，便不能正确的解析出來，es6中可以這樣：

用大括号括起來就可以正常解析超過 ffff 的字元了。

看到上面三個測試，相信你已經知道是什麼意思了。

contains(), startswith(), endswith(), repeat()

都是對 string 的拓展，顧名就能思意。

之前寫過一篇關于 template 标簽的，這裡我們又看到了一個跟模闆相關的東西。

配合 template 标簽使用是比較友善的，不過 template 标簽可以很友善的使用自定義标簽，這個特性也不是很突出了。

字首 0b 和 0o 表示二進制和八進制數值

number.isfinite()

number.isnan()

number.parseint()

number.parsefloat()

number.isinteger()

具體細節可以去

上搜查。

在 es5.1 中我們看到了 object 的靈活性提高了很多，加入了 create、defineproperty、freeze

等等很多十分有用的方法，而在 es6 中，依然繼續加強：

比較嚴格相等，傳入兩個參數，其功能跟 <code>===</code> 差不多，不同的是：+0不等于-0，nan與本身恒等

這東西浏覽器早就實作了，隻是在 es6 才被納入标準中，還記得這東西被用來判斷是否為 ie 麼：

又是一個裝飾品：

挺友善的，不過容易出錯，比如上面，看暈了吧~

一種從類型上區分資料的工具，他是一個原始類型的值，不是對象，很适合做辨別符。

proxy 内置的一個代理工具，使用他可以在對象處理上加一層屏障：

proxy(target, handler), 這裡的 handler 可以是 set get has hasown keys

等等方法，具體可以移步這裡：

他這個參數可以初始化相當于暴露更多的底層接口吧，提高了函數的拓展性。

這裡的 values 需要用 val of values 來周遊。

之前寫過 coffee ，是以對這個我還是比較熟悉的：

這個跟上面提到的一些内容一樣，都是裝飾性的，沒太多用途。

簡單點解釋，他就是一個沒有重複數值的數組。或者說他就是一個數組的 hash 表。

其周遊也是使用 val of values，他沒有繼承 array 的方法，自己的幾個方法是：

size()：傳回成員總數。

add(value)：添加某個值。

delete(value)：删除某個值。

has(value)：傳回一個布爾值，表示該值是否為set的成員。

clear()：清除所有成員。

轉化為數組的方式：

map 是一個“超對象”，其 key 除了可以是 string 類型之外，還可以為其他類型（如：對象）

他的方法和 set 差不多：

size：傳回成員總數。

set(key, value)：設定一個鍵值對。

get(key)：讀取一個鍵。

has(key)：傳回一個布爾值，表示某個鍵是否在map資料結構中。

delete(key)：删除某個鍵。

keys()：傳回鍵名的周遊器。

values()：傳回鍵值的周遊器。

entries()：傳回所有成員的周遊器。

如果說map 是一個“超對象”，那 weakmap 就是個 “弱超對象”，他的鍵值隻能是除 null 以外的對象。他的存在是為了友善垃圾回收。

相比 array，他對資料的管理更為緊湊，而且可操縱性也比較強，以後會成為一個比較通用的 js 工具。

一個對象隻要具備了next方法，就可以用for...of循環周遊它的值。

generator就是一個改裝了的 iterator 周遊器，通過 yield 來增加一個 next() 節點。

聲明一個 generator 的方法：

使用方式：

genrator的辨別就是函數名前面有個 <code>*</code> 号，由于每個 yield 都會增加一個 next() 節點，當我們在一個

generator 中添加多個 yield 的時候：

相比 iterator，我更喜歡 generator。

es6将 promise 納入規範之後，很多浏覽器根據 promise/a+ 規範實作了一套 api，promise對象是對異步操作的平坦式表達，避免了

callback hell，也就是多層嵌套的回調函數。這方面的東西可以參考我之前寫的 .

這裡是

規範文檔，感興趣的可以閱讀一下。

在promises/a規範中，每個任務都有三種狀态：預設(pending)、完成(fulfilled)、失敗(rejected)。

預設狀态可以單向轉移到完成狀态，這個過程叫resolve，對應的方法是deferred.resolve(promiseorvalue)；

預設狀态還可以單向轉移到失敗狀态，這個過程叫reject，對應的方法是deferred.reject(reason)；

預設狀态時，還可以通過deferred.notify(update)來宣告任務執行資訊，如執行進度；

狀态的轉移是一次性的，一旦任務由初始的pending轉為其他狀态，就會進入到下一個任務的執行過程中。

class，對象模闆：

一下子就有了 c++/java 的感覺了，在類中可以使用 extends 繼承：

之前在談過子產品化程式設計的必要性，時代在變化，需求也在變，es6引入

module

也算是與時俱進。es6允許将獨立的js檔案作為子產品，也就是說，允許一個javascript腳本檔案調用另一個腳本檔案，進而使得子產品化程式設計成為可能。

如果我們要引入 circle.js 的函數，可以：

如果要引入整個 circle 的内容：

子產品之間的繼承使用這條指令：

這個東西，很好用，可惜了，純潔的 js，被糟蹋成啥樣了=. =

本文的書寫邏輯參考阮一峰的，并參入了一些個人主觀色彩，感謝前人栽樹！

阮一峰

次碳酸钴

h-jin