Der effizienteste Weg, eine HTMLCollection in ein Array zu konvertieren

Question

Gibt es eine effizientere Möglichkeit, eine HTMLCollection in ein Array zu konvertieren, andere als Iteration durch den Inhalt der besagten Sammlung und manuell schieben jedes Element in ein Array?

Answer 1

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

hat die gleiche Wirkung bei Verwendung von "nativem" Code.

Editar

Da dies sehr häufig vorkommt, sei darauf hingewiesen (gemäß @oriols Kommentar), dass der folgende, prägnantere Ausdruck lautet effektiv gleichwertig:

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

Man beachte jedoch den Kommentar von @JussiR, dass im Gegensatz zur "ausführlichen" Form eine leere, unbenutzte und tatsächlich unbrauchbare Array-Instanz erzeugt wird. Was die Compiler in diesem Fall tun, liegt außerhalb des Einflussbereichs des Programmierers.

Editar

Seit ECMAScript 2015 (ES 6) gibt es auch Array.von :

var arr = Array.from(htmlCollection);

Editar

ECMAScript 2015 bietet auch die Spread-Operator was funktionell äquivalent ist zu Array.from (obwohl zu beachten ist, dass Array.from unterstützt eine Mapping-Funktion als zweites Argument).

var arr = [...htmlCollection];

Ich habe bestätigt, dass die beiden oben genannten Methoden unter folgenden Bedingungen funktionieren NodeList .

Ein Leistungsvergleich für die genannten Methoden: http://jsben.ch/h2IFA

Answer 2

Ich bin nicht sicher, ob dies die effizienteste Lösung ist, aber eine prägnante ES6-Syntax könnte es sein:

let arry = [...htmlCollection] 

---

Bearbeiten: Ein weiterer, von Chris_F Kommentar:

let arry = Array.from(htmlCollection)

Answer 3

Ich sah eine prägnantere Methode, um Array.prototype Methoden, die im Allgemeinen genauso gut funktionieren. Die Umwandlung einer HTMLCollection Objekt in ein Array Objekt wird im Folgenden demonstriert:

\[\].slice.call( yourHTMLCollectionObject );

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

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 ist, aber ich hatte das Gefühl, dass die akzeptierte Antwort ein wenig unvollständig war; also dachte ich, ich werfe diese Frage einfach mal so in den Raum.

Answer 4

Für eine browserübergreifende Implementierung empfehle ich Ihnen einen Blick auf prototype.js $A Funktion

kopiert 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 keine Array.prototype.slice wahrscheinlich, weil sie nicht in jedem Browser verfügbar ist. Ich fürchte, die Leistung ist ziemlich schlecht, da der Rückgriff auf eine Javascript-Schleife über die iterable .

Answer 5

Dies funktioniert in allen Browsern, auch in früheren IE-Versionen.

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

Da jsperf im Moment noch nicht verfügbar ist, hier ein jsfiddle, das die Leistung der verschiedenen Methoden vergleicht. https://jsfiddle.net/qw9qf48j/