2012年6月16日土曜日

[JavaScript][小技]lengthを使わないで配列の要素に順番にアクセスする方法

JavaScriptで定番の、for文を使って配列の要素に順番にアクセスする処理ですが、素直に書くと以下のようになります。
var ar = [2, 3, 5, 7, 9];
for (var i = 0; i < ar.length; i+=1) {
    //ar[i]を使った処理
}
もしくは、ループの度にlengthプロパティにアクセスしないように、配列の長さを初期化時に保存しておきます。
var ar = [2, 3, 5, 7, 9];
for (var i = 0, len = ar.length; i < len;  i+=1) {
    //ar[i]を使った処理
}

ちょっとだけエレガントに..


上記の書き方で全く問題はないのですが、 ちょっとしたテクニックとして、この処理は以下のように置き換えられます。
var ar = [2, 3, 5, 7, 9];
for (var i = 0, elem; elem = ar[i]; i+=1) {
    //elem を処理
}
インデックスが配列の長さを越えるとundefinedが返ってきて、ループが終了します。 さらに、ループの判定時に配列の要素を変数に格納しているので、その後の処理がすっきりするのもなかなか良いです。

 同様に、ECMAScript5 で導入されたarray.forEach メソッドを使っても、配列要素への順次アクセスが可能です。
var ar = [2, 3, 5, 7, 9];
ar.forEach(function(e, i){
    console.log(["Index ", i, " = ", e].join(''));
});
DOMのリストに対しては、forEachのcallメソッドを呼び出せばokです。
var divs = document.getElementsByTagName("div");
[].forEach.call(divs, function(div, i){
    console.log(div.nodeName);
});

まとめ


forを使った配列のループにはlengthを使わなくてok!