web-dev-qa-db-ja.com

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

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

javascriptarraysobject
298
Tom
var arr = Array.prototype.slice.call( htmlCollection )

「ネイティブ」コードを使用しても同じ効果があります。

編集

これは多くのビューを取得するため、次のより簡潔な式は効果的に同等であることに注意してください（@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で機能することを確認しました。

538
harpo

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

let arry = [...htmlCollection]

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

let arry = Array.from(htmlCollection)
76
mido

一般に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に放り出すと思った。

19
Codesmith

クロスブラウザの実装については、 prototype.js$A functionをご覧ください。

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ループであるため、パフォーマンスがかなり悪いのではないかと心配しています。

6
Gareth Davis

これは、ここの情報（このスレッド）に基づく私の個人的な解決策です。

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、そうでない場合はクロスブラウザを使用します。

3
Gustavo

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

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

Jsperfは現在まだダウンしているため、異なるメソッドのパフォーマンスを比較するjsfiddleを示します。 https://jsfiddle.net/qw9qf48j/

3
Nicholas

配列のようなものを効率的な方法で配列に変換するには、 jQuerymakeArrayを使用します。

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 は"array-like"オブジェクトです。 array-like オブジェクトは配列のオブジェクトに似ていますが、その機能的な定義の多くが欠落しています。

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

1
Shahar Shokrani