Effizienteste Weg, um eine HTMLCollection in ein Array zu konvertieren

Question

Gibt es eine effizientere Art und Weise eine HTMLCollection zu einem Array, andere zu konvertieren als die durch die Inhalte des Iterieren Sammlung und manuell jedes Element in ein Array schieben?

Answer 1

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

wird die gleiche Wirkung haben "native" Code.

Bearbeiten

Da diese bekommt eine Menge von Ansichten, Anmerkung (pro @ oriol Kommentar), dass der folgende prägnante Ausdruck effektiv äquivalent:

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

Aber beachte pro @ JussiR Kommentar, dass im Gegensatz zu der „ausführlichen“ Form, eine leere, unbenutzte schafft, und zwar unbrauchbar Array-Instanz in dem Prozess. Was für Compiler dagegen tun ist außerhalb des ken des Programmierers.

Bearbeiten

Seit ECMAScript 2015 (ed 6) gibt es auch Array.from :

var arr = Array.from(htmlCollection);

Bearbeiten

ECMAScript 2015 bietet auch die Ausbreitung Operator , die funktionell äquivalent zu Array.from ist (obwohl zu beachten, dass Array.from eine Abbildungsfunktion als das zweite Argument unterstützt).

var arr = [...htmlCollection];

Ich habe bestätigt, dass beide der oben genannten Arbeiten an NodeList.

Answer 2

nicht sicher, ob dies der effizienteste ist, aber eine kurze ES6 Syntax könnte sein:

let arry = [...htmlCollection] 

---

Edit: Ein weiterer, von Chris_F Kommentar:

let arry = Array.from(htmlCollection)

Answer 3

sah ich eine prägnante Methode des Array.prototype Methoden im Allgemeinen bekommen, die genauso gut funktioniert. ein HTMLCollection Objekts in ein Array Objekt Umwandlung wird unten gezeigt:

[].slice.call( yourHTMLCollectionObject );

Und wie in den Kommentaren erwähnt, für alten Browser wie IE7 und früher, Sie einfach eine Kompatibilitätsfunktion verwenden müssen, wie:

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

    return a
}

Ich weiß, dass dies eine alte Frage, aber ich fühlte die akzeptierte Antwort ein wenig unvollständig war; so dass ich dachte, dass ich diese werfen würde es FWIW aus.

Answer 4

Für eine Cross-Browser-Implementierung würde ich sugguest Sie sehen prototype.js $A Funktion

Copyed von 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;
}

Es verwendet nicht Array.prototype.slice wahrscheinlich, weil es auf jedem Browser nicht zur Verfügung steht. Ich fürchte, die Leistung ist ziemlich schlecht, da es eine der Herbst wieder eine Javascript-Schleife über die iterable ist.

Answer 5

Dies ist meine persönliche Lösung, basierend auf den Informationen hier (dieses Thema):

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

Wo $ A von Gareth Davis in seinem Beitrag beschrieben wurde:

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;
}

Wenn Browser die beste Art und Weise unterstützt, ok, sonst wird die Cross-Browser verwenden.

Answer 6

Dies funktioniert in allen Browsern einschließlich früheren IE-Versionen.

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

Da jsperf noch unten im Moment ist, ist hier eine jsfiddle, die die Leistung der verschiedenen Methoden vergleicht. https://jsfiddle.net/qw9qf48j/

Answer 7

Um Array-like-Array in effizienter Art und Weise konvertieren wir von der jQuery makeArray:

  

Makearray. Konvertieren ein Array-ähnliches Objekts in einen wahren JavaScript-Array

Verbrauch:

var domArray = jQuery.makeArray(htmlCollection);

---

Ein kleines Extra:

Wenn Sie nicht wollen, Verweis auf das Array-Objekt halten (die meisten der Zeit HTMLCollections dynamisch sind verändert, so ist es besser, sie in ein anderes Array zu kopieren, Dieses Beispiel aufmerksam auf die Leistung:

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.
}

Was ist Array-like?

HTMLCollection ist ein "array-like" Objekt, das Array-artige Objekte sind ähnlich wie Arrays Objekt, sondern viele seiner funktionell Definition fehlt:

  

Array-ähnliche Objekte aussehen Arrays. Sie haben verschiedene nummerierte   Elemente und eine Länge Eigenschaft. Aber das ist, wo die Ähnlichkeit aufhört.   Array-ähnliche Objekte haben keine von Array Funktionen sowie für-in   Schleifen funktionieren nicht einmal!