ECMAScript 6 Features in Firefox

所謂的 ECMAScript,其實就是我們日常在用的 Javascript,只是當初因為商標的問題,所以後來把這個語言的規範改叫作 ECMAScript。目前市面上的瀏覽器已經支援到 ECMAScript 5,也就是 ECMAScript 262 5th Edition了。但 ECMAScript 的下一個版本,ECMAScript 6,已經早在 2008 年就開始在討論和實作中了,並且有個 codename 叫 ECMAScript Harmony,所以當你在一些其他地方看到 ECMAScript 6 或 ECMAScript Harmony,其實它們都是指同一個東西。而 ECMAScript 6 除了加了很多新的語法跟功能之外,另一個很大的優點是,它完全跟現在的 ECMAScript 5 相容,也就是你現在所學的 Javascript 的功能,未來在 ECMAScript 6 都一樣可以執行。在 Javascript 愈來愈成熟的情況下,提倡著 “The Web is the Platform" 的 Mozilla, 更是不留餘力的在 ECMAScript 6 的設計跟實作上投入大量的資源,所以今天這篇文章,就是要來介紹 Javascript 的 Pioneer, Mozilla 已經在 Firefox 上面實作完成,並且被大量使用的 ECMAScript 6 Feature。

首先要介紹的就是 let 這個 keyword ,Javascript 原本用來宣告變數的 keyword 是 var ,但 var 的不方便地方在於它是 Function scope ,而不是我們常用的 Block scope 。 例如:

對一般 C/C++ 的開發者,看到上面這個常見的迴圈,會很直覺的以為變數 i 的週期只有在 for loop 裡,但實際上, i 的 scope 不只在 for loop 裡,反而是在整個 function foo 裡面。如果想要讓 i 的 scope 只留在 for loop 裡的話,就只要把 var 換成 let 就好了,也就是:

let 還有另一個優點,就是如果一個變數重覆宣告的話,它會產生 TypeError 出來。

第二個常見的 Feature 就是 for of

它有點像 for in ,只是 for in 是針對 object 的 property name  ,而 for of 是針對 Array 的 property value

例如:

第三個 Feature 是跟 String 有關,像是常見的 startsWithendsWith,這些 method 主要是用來檢查某些 String 的開頭或結尾是不是由某些字元或字串組成的,雖然這在其他語言是很常見的功能,但在 Javascript 上,它可是等到  ECMAScript 6 才變成規範的呢!

最後一個,同時也是最複雜的一個,就是 Destructuring Assigment

首先來個簡單的例子

在第三行執行完後,a 與 b 的內容就會互換了,也就是 a = 2 , b = 1 。

看起來蠻簡單的呀,怎麼會複雜呢~~~

但其實這個功能的用法有更複雜的,而且在 Firefox 的 codebase 裡,幾乎每個用 Javascript 寫的 module 都會在一開始就用到這個功能。

最常見的例子就是

如果讀者不知道有 Destructuring Assigment 這個 syntax 的話,一定會想,這行 code 到底是怎麼跑得過呀 !!??

等號的左邊怎麼沒有變數名稱?

大括號裡面的 Cc, Ci, Cu 跟 Cr 又是從哪來的?

Components 這 object 又是如何 assign 給左邊的 object ?

左邊的大括號裡面的 name: value 又是要作什麼的 ?

筆者一開始看到這語法時也是腦袋一大堆問號………….

但其實這行,就等於下面的程式碼

再回頭看看原本那行程式,這語法還真的複雜許多了!!

 

以上就是目前在 Firefox 裡常用的 ECMAScript 6 的 Feature 。如果讀者還是想多了解 Firefox 裡其他 ECMAScript 6 Feature 的話,可以看 Mozilla 的 Bug 694100

或者是想了解各家瀏覽器對 ECMAScript 6 支援程度的話,可以看下面這個 URL

http://kangax.github.io/es5-compat-table/es6/

 

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *