Gibt es eine effizientere Möglichkeit, eine HTMLCollection in ein Array zu konvertieren, als den Inhalt dieser Sammlung zu durchlaufen und jedes Element manuell in ein Array zu verschieben?
javascript
arrays
object
Tom
quelle
quelle
for (var a=[], i=collection.length; i;) a[--i] = collection[i];
also nicht viel von einem "Array.prototype.slice.call
und Brave (basierend auf Chrome 59.0.3071) unterscheidet praktisch nicht zwischen den beiden Javascript-Tests über mehrere Läufe. Siehe jsperf.com/htmlcollection-array-vs-jquery-childrenAntworten:
hat den gleichen Effekt mit "nativem" Code.
Bearbeiten
Da dies viele Ansichten erhält, beachten Sie (per @ oriols Kommentar), dass der folgende präzisere Ausdruck effektiv äquivalent ist:
Beachten Sie jedoch gemäß dem Kommentar von @ JussiR, dass im Gegensatz zum "ausführlichen" Formular eine leere, nicht verwendete und tatsächlich unbrauchbare Array-Instanz erstellt wird. Was Compiler dagegen tun, liegt außerhalb des Ken des Programmierers.
Bearbeiten
Seit ECMAScript 2015 (ES 6) gibt es auch Array.from :
Bearbeiten
ECMAScript 2015 bietet auch den Spread-Operator , der funktional äquivalent zu ist
Array.from
(obwohl beachten Sie, dassArray.from
eine Zuordnungsfunktion als zweites Argument unterstützt wird).Ich habe bestätigt, dass beide oben genannten Arbeiten funktionieren
NodeList
.Ein Leistungsvergleich für die genannten Methoden: http://jsben.ch/h2IFA
quelle
[].slice.call(htmlCollection)
funktioniert auch.Array.from
dhfrom
wird von IE11 nicht unterstützt.Ich bin mir nicht sicher, ob dies die effizienteste ist, aber eine präzise ES6-Syntax könnte sein:
Edit: Noch einer, aus Chris_F Kommentar:
quelle
Array.from()
Array.from
dhfrom
wird von IE11 nicht unterstützt.Ich habe eine präzisere Methode gesehen, um
Array.prototype
Methoden im Allgemeinen zu erhalten, die genauso gut funktioniert. Das Konvertieren einesHTMLCollection
Objekts in einArray
Objekt wird unten gezeigt:Und wie in den Kommentaren erwähnt, müssen Sie für alte Browser wie IE7 und früher einfach eine Kompatibilitätsfunktion verwenden, wie:
Ich weiß, dass dies eine alte Frage ist, aber ich fand, dass die akzeptierte Antwort etwas unvollständig war; Also dachte ich, ich würde das hier rauswerfen, FWIW.
quelle
Für eine browserübergreifende Implementierung würde ich empfehlen, dass Sie sich die Funktion prototype.js ansehen
$A
kopiert von 1.6.1 :
Es wird
Array.prototype.slice
wahrscheinlich nicht verwendet, da es nicht in jedem Browser verfügbar ist. Ich fürchte, die Leistung ist ziemlich schlecht, da der Fallback eine Javascript-Schleife über dem istiterable
.quelle
$A
Funktion die meiste Zeit.Dies ist meine persönliche Lösung, basierend auf den Informationen hier (dieser Thread):
Wo $ A von Gareth Davis in seinem Beitrag beschrieben wurde:
Wenn der Browser den besten Weg unterstützt, ok, sonst wird der Cross-Browser verwendet.
quelle
[,,]
wird[undefined, undefined]
.Dies funktioniert in allen Browsern, einschließlich früherer IE-Versionen.
Da jsperf derzeit noch nicht verfügbar ist, finden Sie hier eine jsfiddle, die die Leistung verschiedener Methoden vergleicht. https://jsfiddle.net/qw9qf48j/
quelle
var args = (htmlCollection.length === 1 ? [htmlCollection[0]] : Array.apply(null, htmlCollection));
Um Array-like in Array auf effiziente Weise zu konvertieren, können wir die jQuery verwenden
makeArray
:Verwendungszweck:
Ein kleines Extra:
Wenn Sie keinen Verweis auf das Array-Objekt behalten möchten (HTMLCollections werden meistens dynamisch geändert, sodass es besser ist, sie in ein anderes Array zu kopieren. In diesem Beispiel wird die Leistung genau beachtet:
Was ist Array-ähnlich?
HTMLCollection ist ein
"array-like"
Objekt. Die Array-ähnlichen Objekte ähneln dem Objekt des Arrays, es fehlt jedoch ein Großteil seiner funktionalen Definition:quelle