Najszybszy sposób na konwersję JavaScript NodeList na Array?

Wcześniej odpowiedzi na pytania tutaj powiedział, że był to najszybszy sposób:

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

Podczas testów porównawczych w mojej przeglądarce stwierdziłem, że jest on ponad 3 razy wolniejszy niż to:

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

Oba generują tę samą moc wyjściową, ale trudno mi uwierzyć, że moja druga wersja jest najszybszym możliwym sposobem, zwłaszcza że ludzie mówią tutaj inaczej.

Czy to dziwactwo w mojej przeglądarce (Chromium 6)? Czy jest szybszy sposób?

EDYCJA: Dla każdego, kogo to obchodzi, zdecydowałem się na następujące (co wydaje się najszybsze w każdej testowanej przeglądarce):

//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: Znalazłem jeszcze szybszy sposób

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

Drugi jest zazwyczaj szybszy w niektórych przeglądarkach, ale najważniejsze jest to, że musisz go używać, ponieważ pierwszy nie jest po prostu przeznaczony dla różnych przeglądarek. Nawet jeśli czasy się zmieniają

@kangax ( podgląd IE 9 )

Array.prototype.slice może teraz konwertować niektóre obiekty hosta (np. NodeList) na tablice - coś, co większość współczesnych przeglądarek była w stanie zrobić od dłuższego czasu.

Przykład:

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

W ES6 mamy teraz prosty sposób na utworzenie tablicy z NodeList: Array.from()funkcję.

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

Oto nowy fajny sposób na zrobienie tego za pomocą operatora rozprzestrzeniania ES6 :

let arr = [...nl];

Niektóre optymalizacje:

• zapisz długość NodeList w zmiennej
• jawnie ustaw nową długość tablicy przed ustawieniem.
• dostęp do indeksów, zamiast wypychania lub cofania.

Kod ( jsPerf ):

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

Wyniki będą całkowicie zależeć od przeglądarki, aby dać obiektywny werdykt, musimy wykonać testy wydajności, oto kilka wyników, które możesz uruchomić tutaj :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Przegląd platformy IE9 3:

Najszybsza i największa przeglądarka to

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

Jak porównałem w

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

* Dzięki @CMS za pomysł!

W ES6 możesz użyć:

• Array.from

  let array = Array.from(nodelist)

• Operator rozsiewu

  let array = [...nodelist]

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

Teraz możesz zrobić document.querySelectorAll ('div'). ForEach (function () ...)

szybciej i krócej:

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

Sprawdź ten post na blogu , który mówi o tym samym. Z tego, co zbieram, dodatkowy czas może mieć związek z przejściem w górę łańcucha lunety.

Z tej funkcji korzystam w JS:

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

Oto wykresy zaktualizowane na dzień opublikowania (wykres „nieznanej platformy” to Internet Explorer 11.15.16299.0):

Na podstawie tych wyników wydaje się, że metoda preallocate 1 jest najbezpieczniejszym zakładem dla różnych przeglądarek.

Zakładając nodeList = document.querySelectorAll("div"), że jest to zwięzła forma konwersji nodelistna tablicę.

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

Zobacz mnie, użyj go tutaj .