JavaScript 1.6, 1.7, 1.8 新功能探討

此為 JavaScript 學習筆記。

目前 JavaScript 由 Mozilla 基金會所主導維護開發，目前最新版是 1.7 (in Firefox 2.0)，開發中版本 1.8 (in Firefox 3) 是 jQuery 作者 John Resig 主導。雖然 1.5 以後的新版本大多只有 Firefox 自己支援，但是如果就這樣不去學習新功能也未免太可惜了點。有鑒於坊間的書都是介紹舊版本而不會介紹新版的關係，自本家的 Development Wiki 看資料最快速，搭配範例程式碼實際操作幾遍很快就會了。可惜的是這些新功能不是每個瀏覽器都支援，在等待迎向 JavaScript 2.0 的同時，也來關心一下這些版本到底多了什麼新玩意。

New in JavaScript 1.6:

‧Array 增加更多方法
- indexOf, lastIndexOf
- every, some, filter
- map, forEach

(last)indexOf 方法其實跟 String 的一樣，所以沒什麼好講的。要查詢某個陣列中是否有特定的元素用這個方法會更方便。至於 every, some, filter 可傳入一個函式讓陣列中的元素去試，every 全部符合回傳 true, some 部分符合回傳 true, filter 則會回傳符合元素。map 和 forEach 則可以丟入一個函式讓每個元素去跑 (map 可依函式執行結果修改陣列元素)。

<br />var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];<br /><br />arr.indexOf(3); // return 2<br />arr.lastIndexOf(3); // return 6<br />arr.every(function(i){ // return false<br /> return i > 2;<br />});<br /><br />arr.some(function(i){ // return true<br /> return i > 2;<br />});<br /><br />arr.filter(function(i){ // return [3, 4, 5, 4, 3]<br /> return i > 2;<br />});<br /><br />arr.map(function(i){ // return [2, 4, 6, 8, 10, 8, 6, 4, 2]<br /> return i * 2;<br />});<br /><br />arr.forEach(function(i){<br /> document.write(i * i + '<br \/>'); // Print 1, 4, 9, 16, 25, 16, 9, 4, 1<br />});<br />

New in JavaScript 1.7:

1.7 真是大改進。不像先前的版本只有方法的增加，這次更有語法方面的增加。

‧新增 Generator, Iterator 物件
- yield 敘述, next 方法

Generator 可以在迴圈內暫停，並將值先送出來。待下次呼叫時再行運作，並且重複以上步驟。用範例看會比較清楚。

<br />function foo(){<br /> var i = 1;<br /> while(true)<br /> yield i++; // Similar to return<br />}<br /><br />var bar = foo(); // Generator<br />for(var i = 0; i < 10; i++)<br /> document.write(bar.next()); // Print 1, 2, 3, ..., 10<br />

這個 foo 用到了 yield 敘述，因此會回傳一個 Generator 物件並指定給變數 bar。變數 bar 具有 next() 方法，當每次呼叫時會執行 foo() 裡面的敘述，第一次碰到 yield 時就會將指定的 i++ 傳出來，於是印出 1。當下一次再呼叫 bar.next() 時便會繼續從剛才中斷處執行下去，又碰到 yield，中斷回傳 2，就這樣重複。雖然 foo() 內定義的是無限迴圈， 但是有了 Generator 就可以控制這個迴圈，不斷的以 next() 回傳希望的數值。

Iterator 就是迭代器(迴圈器)，使用 Iterator() 包裹起來後便可以用 next() 來逐一取元素，當已經取到底的時候 next() 會觸發一個 StopIteration 例外藉以停止。

<br />var obj = {id: 'foo', rname: 'foobar', level: 102, HP: 1063, MP: 325};<br />var it = Iterator(obj); // Iterator<br />var v;<br /><br />try{<br /> while(true)<br /> document.write(it.next() + "<br \/>\n"); // key,value<br />}catch(e if e instanceof StopIteration){}<br />

但是我覺得下面的方法更直覺：

<br />var obj = {id: 'foo', rname: 'foobar', level: 102, HP: 1063, MP: 325};<br /><br />for(v in obj)<br /> document.write(v + ',' + obj[v] +"<br \/>\n");<br />

‧Array comprehensions

將原本生成陣列時繁瑣的步驟變成一行式，不過這不好理解而且有點難用，似乎是從 Python 移植過來的功能。

<br />function num(max){ for(var i = 0; i < max; i++) yield i; }<br /><br />var obj = [i for (i in num(100)) if (i < 50)];<br />alert(obj); // [0, 1, 2, 3, ...,49]<br />

[i for (i in ...) if ...] 是這個功能的重點，首先從 for...in 取出值來放入陣列，後面也可以指定 if 條件另外限制陣列值，符合 if 條件式的才放入陣列。

‧let 敘述
- let 敘述 / 區塊, 定義

在一個特定的範圍定義變數的值，就類似結界那樣，超過此範圍後設定無效，效果只在範圍內。當然也可以作用在一行，不要加中括號後面直接跟著一段敘述就可以了。

<br />var x = 1, y = 1;<br />alert(x+', '+y); // 1, 1<br /><br />let(x = 10, y = 5){ // [let 區塊]<br /> alert(x+', '+y); // 10, 5<br />}<br />alert(x+', '+y); // 1, 1<br /><br />let(x = 42, y = 52) alert(x+', '+y); // 42, 52 [let 敘述]<br />

let 定義比較特別，用法跟 var 其實差不多，不過它只作用在一個指定的小區塊，比方說下面兩個例子：

<br />var i = 10;<br />if(i = 10){ // [let 定義] 只在此區塊中有用<br /> let i = 0;<br /> alert(i); // 0<br />}<br />alert(i); // 10<br /><br />var p = 0;<br />for(var p = 0; p < 10; p++){ } alert(p); // 10, 區塊外的變數會影響<br /><br />p = 0; // Reset<br />for(let p = 0; p < 10; p++){ } alert(p); // 0, 對區塊外的變數毫無影響<br />

第一例告訴我們可以在一個區塊內暫時更改變數值，範例中 let 被 if{ } 包住，故作用區塊就是這一塊。第二例告訴我們用在迴圈的 let 非常方便，不會影響到外面的變數，可以在獨立的環境中安心使用變數。

‧Destructuring assignment

這是個非常便利且直覺的好功能，可以直接一次對多個變數作指定，而不必再用暫時變數挪來挪去的，另外也可以在函式回傳陣列值時直接大量指定。

比較有趣的功能是可以在物件同時取得元素鍵值和資料，有點類似 PHP 的 foreach($arr as $k => $v) 那樣。

<br />/* 大量指定 */<br />var [a, b, c, d] = [100, 90, 80, 70]; // a = 100, b = 90, c = 80, d = 70<br />[a, b, c, d] = [d, c, b, a]; // a = 70, b = 80, c = 90, d = 100<br /><br />function multivalue(){ return [125, 358]; }<br />var [s1, s2] = multivalue(); // s1 = 125, s2 = 358<br /><br />/* 直接取得物件鍵值和資料 */<br />var obj = {id: 'foo', rname: 'foobar', level: 102, HP: 1063, MP: 325};<br /><br />for (let [k, v] in obj)<br /> document.write('key: ' + k + ', value: ' + v + "<br \/>\n");<br />

New in JavaScript 1.8:

‧Expression closures

為了實現簡單的 Lambda Function，JavaScript 1.8 簡化了這種特殊的語法：

<br />// Before<br />var lambda = function(x){ return x * x; };<br /><br />// After<br />var lambda = function(x) x * x; <br />
簡單說就是省略大括號 {} 跟 return 這樣，這部分有人建議既然都改短了應該要改的更簡潔，例如 f(x) x * x; 這樣，看日後是否有修改機會。

‧Generator expressions

1.7 的 Generator 活用法，這好像還是 Python 移植過來的。類似 Array comprehensions 的做法：

<br />var obj = {id: 'foo', rname: 'foobar', level: 102, HP: 1063, MP: 325};<br />var t = (i + '(new)' for (i in obj)); // A New Generator<br /><br />for(tt in t){<br /> alert(tt);<br />}<br />
這可以生成一個 Generator，每次執行 .next() 會回傳 "XX(new)" 字串。範例使用 for...in 來對其作 Iteration 的動作，可以當成陣列來處理的感覺。

‧其他
我比較期待原生支援 JSON encode/decode 方法，希望日後能內建成功。