Der schnellste Weg, um JavaScript NodeList in Array zu konvertieren?

Zuvor beantwortete Fragen hier sagten, dass dies der schnellste Weg war:

//nl is a NodeList
var arr = Array.prototype.slice.call(nl);

Beim Benchmarking in meinem Browser habe ich festgestellt, dass es mehr als dreimal langsamer ist als dieses:

var arr = [];
for(var i = 0, n; n = nl[i]; ++i) arr.push(n);

Beide produzieren die gleiche Ausgabe, aber ich kann kaum glauben, dass meine zweite Version der schnellstmögliche Weg ist, zumal die Leute hier etwas anderes gesagt haben.

Ist das eine Eigenart in meinem Browser (Chromium 6)? Oder gibt es einen schnelleren Weg?

EDIT: Für alle, die sich interessieren, habe ich mich für Folgendes entschieden (das in jedem von mir getesteten Browser am schnellsten zu sein scheint):

//nl is a NodeList
var l = []; // Will hold the array of Node's
for(var i = 0, ll = nl.length; i != ll; l.push(nl[i++]));

EDIT2: Ich habe einen noch schnelleren Weg gefunden

// nl is the nodelist
var arr = [];
for(var i = nl.length; i--; arr.unshift(nl[i]));

Der zweite ist in einigen Browsern tendenziell schneller, aber der Hauptpunkt ist, dass Sie ihn verwenden müssen, da der erste einfach nicht browserübergreifend ist. Auch wenn die Zeiten, in denen sie a-Changin sind

@ Kangax ( IE 9 Vorschau )

Array.prototype.slice kann jetzt bestimmte Hostobjekte (z. B. NodeLists) in Arrays konvertieren - etwas, was die meisten modernen Browser schon seit einiger Zeit können.

Beispiel:

Array.prototype.slice.call(document.childNodes);

Mit ES6 haben wir jetzt eine einfache Möglichkeit, ein Array aus einer NodeList zu erstellen: die Array.from()Funktion.

// nl is a NodeList
let myArray = Array.from(nl)

Hier ist eine neue coole Möglichkeit, dies mit dem ES6-Spread-Operator zu tun :

let arr = [...nl];

Einige Optimierungen:

• Speichern Sie die Länge der NodeList in einer Variablen
• Legen Sie die Länge des neuen Arrays vor dem Festlegen explizit fest.
• Zugriff auf die Indizes, anstatt zu verschieben oder zu verschieben.

Code ( jsPerf ):

var arr = [];
for (var i = 0, ref = arr.length = nl.length; i < ref; i++) {
 arr[i] = nl[i];
}

Die Ergebnisse hängen vollständig vom Browser ab. Um ein objektives Urteil zu fällen, müssen wir einige Leistungstests durchführen. Hier sind einige Ergebnisse, die Sie ausführen können hier :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

IE9 Platform Preview 3:

Der schnellste und browserübergreifendste ist

for(var i=-1,l=nl.length;++i!==l;arr[i]=nl[i]);

Wie ich in verglichen habe

http://jsbin.com/oqeda/98/edit

* Danke @CMS für die Idee!

In ES6 können Sie entweder Folgendes verwenden:

• Array.from

  let array = Array.from(nodelist)

• Spread-Operator

  let array = [...nodelist]

NodeList.prototype.forEach = Array.prototype.forEach;

Jetzt können Sie document.querySelectorAll ('div'). ForEach (function () ...) ausführen.

schneller und kürzer:

// nl is the nodelist
var a=[], l=nl.length>>>0;
for( ; l--; a[l]=nl[l] );

Schauen Sie sich diesen Blog-Beitrag hier an , der über dasselbe spricht. Soweit ich weiß, hat die zusätzliche Zeit möglicherweise damit zu tun, die Zielfernrohrkette hinaufzugehen.

Dies ist die Funktion, die ich in meinem JS verwende:

function toArray(nl) {
    for(var a=[], l=nl.length; l--; a[l]=nl[l]);
    return a;
}

Hier sind die zum Datum dieser Veröffentlichung aktualisierten Diagramme (Diagramm "unbekannte Plattform" ist Internet Explorer 11.15.16299.0):

Aus diesen Ergebnissen geht hervor, dass die Methode der Vorbelegung 1 die sicherste Cross-Browser-Wette ist.

Angenommen nodeList = document.querySelectorAll("div"), dies ist eine prägnante Form der Konvertierung nodelistin ein Array.

var nodeArray = [].slice.call(nodeList);

Sehen Sie, wie ich es hier benutze .