初探ECMAScript 6 (上)
ECMAScript 6是國際JavaScript新版的標準，該標準的出現將對JavaScript帶來不同的定位，此次更新提供結構化與模組化的寫法，強化了語言本身的架構；而更高語言撰寫約束，則是避免個模組之間產生衝突，雖然發展越來越接近一般的高階編程語言，但這也讓在Web Client端能夠使用的應用越來越強大與複雜。
ECMAScript 是一種腳本程式語言，由Ecma International（前身為歐洲計算機製造商協會）透過ECMA-262標準化。在ECMAScript尚未出現之前Microsoft與Netscape 的JavaScript技術各自為政，分別針對自家的瀏覽器提供不同的功能，因此各平台之間存在著相當大的差異。1997年6月ECMA發表了第一版ECMAScript標準後，各家的JavaScript才陸續依此進行發展，並分別就ECMAScript的標準實現與擴展其功能。此版本是自從2009年ECMAScript 5公佈至今第一次重大的更新，目前常見的瀏覽器包含Chrome、Firefox、Internet Explorer、Opera、Safari…等，皆已支援ECMAScript 5所規範的內容。
早期的JavaScript主要是用讓DOM與CSS能夠有些連結與互動，很少人會把它拿來寫大型的專案或者是複雜的應用，近年來由於Mobile 的興起及HTML 5 出現，再加上Google 開啟瀏覽器效能的競爭之路後，各平台逐漸重視JavaScript的效能。相對應的Client端應用也越來越複雜，既有的JavaScript陸續出現了對於部分功能支援不足的現象，為了因應大型或複雜應用程式的需求，Ecma International催生了ECMAScript 6。
本文就目前拍板的ECMAScript 6 草稿中，介紹些與之前不同的特點，不過目前各家瀏覽器只支援ECMAScript 6部分特點，因此無法靠單一瀏覽器進行測試，本文將利用了Firefox Nightly 34.0a1、Chrome 38.0.2114.2 m (64-bit) 或搭配Traceur呈現，ECMAScript 6於各瀏覽器的支援如下表：

表1


二、ECMAScript 6 特點

從EMCAScript 6所公布的草稿來看，大概可以條列為以下幾類，不過由於篇幅的關係將分為兩篇(上、下)，依序進行介紹：

●上篇
1. 新的型別、修飾詞：包含了let、const、Rest、Spread、Symbol、Map、Set、Proxy、Promises…等。

●下篇

2. 既有型別或物件的擴充：String、Number、Math、Object、Array
3. 簡便的寫法與用法： Default function parameter、For…of、Interactor、Generator、Destructuring。
4. 結構化的應用：Class、Module。

1.新的型別、修飾詞

(1)Let變數

var 是常用的變數宣告方式，以for loop為例，通常在該區塊內宣告的變數會希望是區域變數，不希望外部可以使用，但在EMCAScript 6之前是可能發生。這在程式的撰寫上經常會出現不易除錯的情形；但是EMCAScript 6之後將提供封閉區塊的區域變數宣告let，使用let宣告的變數將只能在該封閉區塊才允許讀取。



參考MDN的說明，let 也不允許同一個區塊內重複宣告，並且若再宣告前即使用則會引發Type Error，範例如下：



(2)Const變數

Const是一個常數，只允許單次給值，不過Const只有在該區域內有用。由於靜態的限制，避免給值前使用。



(3)Rest變數、Spread修飾詞

Rest變數(…變數) 提供了如C# parms 如同的效果，避免相同作用但是引數不同方法同時存在。若將Spread (…)置於Array之前，則會將Array的內容依序擺放於function 的參數中，不須特別將其展開。



所以如果想合併兩個Array，就可以直接將兩個Array Spread後放在同一個Array裡面，不過若將兩個Array結合完後再拆解，有可能導致數值判斷為字串。



字串也具備相同的效果，Spread(…)會將字串拆成各置獨立的字元，傳入Function中，範例如下：



(4)Symbol 資料型別

Symbol是ECMAScript 6提供的一種新的資料型態，最大的特點是每一個Symbol都不相等，具備獨一無二的值，因此可以用來作為確保物件或屬性間唯一而不衝突的用途；若要從全域取得同一個key值所生成的Symbol物件，就必須要利用Symbol.for( key )去取得(若不存在則生成)，相對的若要從全域的Symbol物件中取得其key值，則必須利用Symbol.For( sym )，用Symol函數生成的則會取不到。



另外Symbol還有提供其他的method，整理如下表，不過目前尚無平台支援，因此無法測試。

表2


(5)Map、Set、WeakMap、WeakSet 集合

Map提供了類似Dictionary的機制，讓User可以指定key與Value的對應，而其功用有點像是Object一樣有key與Value的對應，不過因為Object本身有部分內建的key所以不如Map好用，況且Object所存放的值皆為String。而WeakMap與Map類似，不過WeakMap只允許object作為key，而且WeakMap對於key object的鏈結是較弱的，所以有可能會因為garbage collection而消失。



Set則提供了存放唯一值物件，因此在Set裡面不會存在相同的值，不論是 Object、String、Number、Boolean、NaN、undefined或Symbol皆可以存放。WeakSet提供了Object的集合，WeakSet裡的Object只會產生一次也是唯一的，與Set的差異在於WeakSet只允許存放Object，而且如同WeakMap一般，所鏈結的object可能會因garbage collection而消失。



(6)Proxy 型別

有點像是檢哨站，可以用來將所有需要額外處置的行為包裹起來，在該對象被使用之前必須先執行所包裹的內容。



(7)Promises 型別

Promises是一個用來提供非同步執行的函式庫，Promises允許methods如同同步執行般的回傳值。為了定義callback的方法，Promises提供了then方法，用來指定resolve和reject的callback方法。



不過then方法還可以進行串接，另外若要擷取then方法中所產生的例外則可以串接catch方法。



另有2. 既有型別或物件的擴充、3. 簡便的寫法與用法以及4. 結構化的應用 將在初探ECMAScript 6(下)進行介紹。

三、ECMAScript 6影響

從草稿的內容看來，ECMAScript 6的出現對開發者來說有幾點影響：

1.更簡易的開發

為了更簡易的達成Client端所需的複雜應用，新的規格訂定了新的變數( let 、const、rest …)、型別( symbol、map/set、proxy…)及擴充功能( string、number、object、array…)等，更加完善的功能使得應用本身可以更多元、更便利，不在需要利用自行撰寫的方法或物件模擬特定行為。對於既有開發者而言，ECMAScript 6的出現將加速應用的開發，再加上該版本向下相容，在使用既有的功能不需有太多的調整，因此無論是更新或維護既有的應用並不會產生太大的影響；而對新的開發者來說，由於ECMAScript 6越來越偏向一般的高級編程語言，因此其入門門檻相對的也比較低。

2.較嚴謹的寫法

對於既有的開發者而言，ECMAScript 6調整了變數及Scope的使用( let、const…)，使得該語言的變數使用越來越嚴謹，因應不同的目的，所需宣告的變數將不再相同，既有的開發習慣勢必得調整，不過好處是不同的應用模組間的變數或方法不會再彼此影響，因此在大型專案的運作之下，平行開發的難度就變低了。

3.結構化的用法

另外一個重大的變革是新的Class與Module的使用，ECMAScript 6的使用越來越組織及結構化，Class同時提供了繼承的機制，使子類別可以直接利用super及搭配constructor的使用參考其父類別；對於開發者而言，必須習慣新的組織及結構化的方式，避免繼續使用利用變數及物件的變通方式。

4.流程控制

Generator / Iterator為函數提供了不同的進入點，而Promise更是針對非同步流程控制的部分提供了強大的解法，對於開發者來說這無疑是一大福音，對於整題流程的掌握將越來越多元及完整；可惜的是目前尚未能實際了解各瀏覽器的支援狀況，因此開發者在開發時可能必須要同時考量各家瀏覽器對於流程的控制方式的差異。

四、結論

ECMAScript 6的正式版本雖然要等到今年底或明年中才會公佈，但以目前草稿的內容看來，新的型別、物件甚至結構與模組化的出現，讓未來Client端的應用越來越強大，在mobile及Web掛帥的時代，使用者對於Web端的應用與依賴已經越來越高，屆時所產生的影響絕對不只筆者所討論到的部分；雖然以目前瀏覽器支援的情況看來，ECMAScript 6距離完整實作還有一段距離，不過ECMAScript 7已經開始規劃，許多ECMAScript 6來不及加入的實作早已納入討論，因此無論是既有或新加入的開發者，絕不能等到瀏覽器完全支援後才開始熟悉，因為在ECMAScript 6拍板的同時，各家瀏覽器業者絕對會快速的因應這一波變革，如何在瀏覽器支援的同時甚至更早提出新的應用，將是Web Client開發者最重大的課題。

五、參考資料

●ECMAScript Web Site. http://www.ecmascript.org/index.php
●ECMAScript 6 Features。https://github.com/lukehoban/es6features
●ECMAScript 6 Compatibility Table。http://kangax.github.io/compat-table/es6/
●ECMAScript 6 Specification Drafts。http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts
●ECMAScript 6 support in Mozilla。https://developer.mozilla.org/en-US/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla
●Mozilla Developer Network。https://developer.mozilla.org/zh-TW/


（本文由凌群電腦提供）