javascript - JavaScript NodeListを配列に変換する最速の方法は?

Question

ここで以前に回答された質問は、これが最速の方法であると言っていました:

//nl is a NodeList
var arr = Array.prototype.slice.call(nl);

私のブラウザでのベンチマークでは、これより 3 倍以上遅いことがわかりました。

var arr = [];
for(var i = 0, n; n = nl[i]; ++i) arr.push(n);

どちらも同じ出力を生成しますが、2 番目のバージョンが可能な限り最速の方法であるとは信じがたいと思います。

これは私のブラウザ (Chromium 6) の癖ですか? それとももっと速い方法がありますか？

編集:気になる人のために、私は以下に落ち着きました(これは私がテストしたすべてのブラウザーで最速のようです):

//nl is a NodeList
var l = []; // Will hold the array of Node's
for(var i = 0, ll = nl.length; i != ll; l.push(nl[i++]));

EDIT2：さらに速い方法を見つけました

// nl is the nodelist
var arr = [];
for(var i = nl.length; i--; arr.unshift(nl[i]));

score 227 · Accepted Answer

2021 更新: nodeList.forEach() が標準になり、現在のすべてのブラウザーでサポートされます (デスクトップとモバイルの両方で約 95% )。

したがって、次のように簡単に実行できます。

document.querySelectorAll('img').forEach(highlight);

その他のケース

何らかの理由でそれを配列に変換するだけでなく、それを反復するだけでなく、これは完全に関連するユースケースです-[...destructuring]またはArray.fromES6以降を使用できます

let array1 = [...mySetOfElements];
// or
let array2 = Array.from(mySetOfElements);

これは、NodeList ではない他の配列のような構造でも機能します。

古い2010年の回答

一部のブラウザーでは 2 番目の方が高速になる傾向がありますが、重要な点は、最初のブラウザーはクロスブラウザーではないため、それを使用する必要があるということです。たとえ時代が変わっても

@kangax ( IE 9 プレビュー)

Array.prototype.sliceは、特定のホストオブジェクト (NodeList など) を配列に変換できるようになりました。これは、最近のブラウザーの大部分でかなり前から可能でした。

例：

Array.prototype.slice.call(document.childNodes);

score 19 · Accepted Answer

いくつかの最適化:

コード ( jsPerf ):

var arr = [];
for (var i = 0, ref = arr.length = nl.length; i < ref; i++) {
 arr[i] = nl[i];
}

score 15 · Accepted Answer

結果は完全にブラウザーに依存します。客観的な判断を下すには、いくつかのパフォーマンステストを行う必要があります。いくつかの結果を次に示します。ここで実行できます。

クロム 6:

Firefox 3.6:

Firefox 4.0b2:

サファリ 5:

IE9 プラットフォームプレビュー 3:

score 15 · Accepted Answer

最も高速でクロスブラウザは

for(var i=-1,l=nl.length;++i!==l;arr[i]=nl[i]);

で比較したように

*アイデアをくれた@CMSに感謝します！

クロム (Google Chrome に類似) ファイアフォックスオペラ

score 7 · Accepted Answer

NodeList.prototype.forEach = Array.prototype.forEach;

これで、 document.querySelectorAll('div').forEach(function()...) を実行できます

score 5 · Accepted Answer

より速く、より短く:

// nl is the nodelist
var a=[], l=nl.length>>>0;
for( ; l--; a[l]=nl[l] );

score 3 · Accepted Answer

これは、JSで使用する関数です。

function toArray(nl) {
    for(var a=[], l=nl.length; l--; a[l]=nl[l]);
    return a;
}

score 3 · Accepted Answer

同じことについて話しているこのブログ投稿をチェックしてください。私が収集したところによると、余分な時間はスコープチェーンを上っていくことに関係している可能性があります。