HTMLCollectionを配列に変換する最も効率的な方法

Question

HTMLCollectionを配列に変換するためのより効率的な方法はありますか？

Answer 1

var arr = Array.prototype.slice.call( htmlCollection )

＆quot; native＆quot;を使用しても同じ効果が得られます。コード。

編集

これは多くのビューを取得するため、（@ oriolのコメントごとに）次のより簡潔な表現は効果的に同等であることに注意してください：

var arr = [].slice.call(htmlCollection);

ただし、@ JussiRのコメントごとに注意してください。「詳細」とは異なります。フォームでは、プロセスで空の未使用の配列インスタンスを作成します。これについてコンパイラーが行うことは、プログラマーの範囲外です。

編集

ECMAScript 2015（ed 6）以降、 もあります。 Array.from ：

var arr = Array.from(htmlCollection);

編集

ECMAScript 2015では、スプレッド演算子、機能的には Array.from と同等です（ただし、 Array.from は2番目の引数としてマッピング関数をサポートしています）。

var arr = [...htmlCollection];

上記の両方が NodeList で機能することを確認しました。

Answer 2

これが最も効率的かどうかはわかりませんが、簡潔なES6構文は次のようになります。

let arry = [...htmlCollection] 

---

編集：別のもの、Chris_Fコメントから：

let arry = Array.from(htmlCollection)

Answer 3

一般に Array.prototype メソッドを取得する、より簡潔なメソッドを見つけました。 HTMLCollection オブジェクトを Array オブジェクトに変換する方法を以下に示します。

[].slice.call( yourHTMLCollectionObject );

そして、コメントで述べたように、 IE7以前のような古いブラウザの場合、次のような互換機能を使用するだけです。

function toArray(x) {
    for(var i = 0, a = []; i < x.length; i++)
        a.push(x[i]);

    return a
}

これは古い質問ですが、受け入れられた答えは少し不完全であると感じました。だから私はこれをFWIWに放り出すと思った。

Answer 4

クロスブラウザの実装については、 prototype.js $ A 関数

1.6.1からコピー：

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

Array.prototype.slice を使用しないのは、おそらくすべてのブラウザーで使用できるわけではないためです。フォールバックは iterable のjavascriptループであるため、パフォーマンスはかなり悪いと思います。

Answer 5

これは、ここの情報に基づいた個人的なソリューションです（このスレッド）：

var Divs = new Array();    
var Elemns = document.getElementsByClassName("divisao");
    try {
        Divs = Elemns.prototype.slice.call(Elemns);
    } catch(e) {
        Divs = $A(Elemns);
    }

$ AがGareth Davisの投稿で説明されている場所：

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

ブラウザが最適な方法をサポートしている場合は、OK、そうでない場合はクロスブラウザを使用します。

Answer 6

これは、以前のIEバージョンを含むすべてのブラウザーで機能します。

var arr = [];
[].push.apply(arr, htmlCollection);

jsperfは現時点ではまだ停止しているため、さまざまなメソッドのパフォーマンスを比較するjsfiddleを次に示します。 https://jsfiddle.net/qw9qf48j/

Answer 7

配列のようなものを効率的な方法で配列に変換するには、 jQuery makeArray ：

  

makeArray：配列のようなオブジェクトを真のJavaScript配列に変換します。

使用法：

var domArray = jQuery.makeArray(htmlCollection);

---

少し余分：

配列オブジェクトへの参照を保持したくない場合（ほとんどの場合、HTMLCollectionsは動的に変更されるため、別の配列にコピーする方が良いでしょう。この例ではパフォーマンスに細心の注意を払っています：

var domDataLength = domData.length //Better performance, no need to calculate every iteration the domArray length
var resultArray = new Array(domDataLength) // Since we know the length its improves the performance to declare the result array from the beginning.

for (var i = 0 ; i < domDataLength ; i++) {
    resultArray[i] = domArray[i]; //Since we already declared the resultArray we can not make use of the more expensive push method.
}

配列のようなものとは

HTMLCollection は、＆quot; array-like＆quot; です。オブジェクト、 array- like オブジェクトは配列のオブジェクトに似ていますが、機能的な定義の多くが欠落しています：

  

配列のようなオブジェクトは配列のように見えます。彼らは様々な番号を持っています   要素と長さプロパティ。しかし、それは類似性が止まるところです。   配列のようなオブジェクトには、配列の関数はありません。for-in   ループは機能しません！