Il modo più veloce per convertire JavaScript NodeList in array?

Le domande a cui era stata data risposta in precedenza qui dicevano che questo era il modo più veloce:

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

Nel benchmarking sul mio browser ho scoperto che è più di 3 volte più lento di questo:

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

Entrambi producono lo stesso output, ma trovo difficile credere che la mia seconda versione sia il modo più veloce possibile, soprattutto perché qui la gente ha detto diversamente.

È una stranezza nel mio browser (Chromium 6)? O c'è un modo più veloce?

EDIT: Per chiunque si preoccupi, ho optato per quanto segue (che sembra essere il più veloce in ogni browser che ho testato):

//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: ho trovato un modo ancora più veloce

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

Il secondo tende ad essere più veloce in alcuni browser, ma il punto principale è che devi usarlo perché il primo non è semplicemente cross-browser. Anche se i tempi sono un cambiamento

@kangax ( anteprima di IE 9 )

Array.prototype.slice ora può convertire alcuni oggetti host (ad esempio NodeList) in array, cosa che la maggior parte dei browser moderni è stata in grado di fare per un bel po '.

Esempio:

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

Con ES6, ora abbiamo un modo semplice per creare un array da un NodeList: la Array.from()funzione.

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

Ecco un nuovo fantastico modo per farlo utilizzando l' operatore spread ES6 :

let arr = [...nl];

Alcune ottimizzazioni:

• salva la lunghezza della NodeList in una variabile
• impostare esplicitamente la lunghezza del nuovo array prima di impostare.
• accedere agli indici, piuttosto che spingere o spostare.

Codice ( jsPerf ):

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

I risultati dipenderanno completamente dal browser, per dare un verdetto oggettivo, dobbiamo fare alcuni test delle prestazioni, ecco alcuni risultati, puoi eseguirli qui :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Anteprima della piattaforma IE9 3:

Il browser più veloce e incrociato è

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

Come ho confrontato in

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

* Grazie @CMS per l'idea!

In ES6 puoi usare:

• Array.from

  let array = Array.from(nodelist)

• Operatore di diffusione

  let array = [...nodelist]

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

Ora puoi fare document.querySelectorAll ('div'). ForEach (function () ...)

più veloce e più breve:

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

Dai un'occhiata a questo post sul blog qui che parla la stessa cosa. Da quello che raccolgo, il tempo extra potrebbe avere a che fare con il camminare lungo la catena di portata.

Questa è la funzione che uso nel mio JS:

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

Ecco i grafici aggiornati alla data di pubblicazione (il grafico "piattaforma sconosciuta" è Internet Explorer 11.15.16299.0):

Da questi risultati, sembra che il metodo preallocato 1 sia la scommessa cross-browser più sicura.

Supponendo nodeList = document.querySelectorAll("div"), questa è una forma concisa di conversione nodelistin array.

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

Vedimi usarlo qui .