Javascriptの本を読んでいると'配列のようなオブジェクト'という文言をよく見かける。
関数の中で参照可能なargumentsというオブジェクトやdocument.getElementsByTagNameメソッド呼び出しによって得られる'NodeList'というオブジェクトなんかがそうだ。
例えばこれらのオブジェクトに対して

var ele = document.getElementsByTagName('li');
alert(ele instanceof Array);

こんな風にinstanceof演算子を適用しても'false'になってしまう。
なぜ'配列のような'と言われるかというと

ele[0];

のようにアクセスが出来て

for (var i = 0; i < ele.length; i++) {}

のようにループ処理が出来るからだ。
ただし'配列のような'と言われている以上は実際は配列ではない。
つまりは

ele.slice();

ele.push();

等の配列用メソッドが使えないということになる。
ただしこれら'配列のようなオブジェクト'を本物の配列にしてしまう方法がある。
Function.applyやFunction.callを使えばいい。
例えば

ele = Array.prototype.slice.call(ele);

こうして得られたele変数は本物の配列になっている。

alert(ele instanceof Array);

とすれば今度は'true'を得ることが出来る。もちろん

ele.reverse();

等という配列用のメソッドも使えるようになっている。

forループを使わずに<li>タグすべてにイベントを設定するのもこんな風に書ける。

window.addEventListener('load', function(evt) {
    var li = document.getElementsByTagName('li');
    Array.prototype.map.call(li, function(e) {
        e.addEventListener('click', function(evt) {
            alert(evt.target.innerHTML);
        }, false);
    });
}, false);

ちなみにmapという配列用メソッドはJavascript 1.6以上から実装されている。
あと上のコードはもちろんIEでは動かない。
addEventListenerが実装されていないからだ。

カテゴリ:

トラックバック(0)

トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/42

コメントする