A maneira mais rápida de converter JavaScript NodeList para Array?

As perguntas anteriormente respondidas aqui disseram que esse era o caminho mais rápido:

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

Nos testes comparativos no meu navegador, descobri que é mais de três vezes mais lento que isso:

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

Ambos produzem a mesma saída, mas acho difícil acreditar que minha segunda versão seja a maneira mais rápida possível, principalmente porque as pessoas disseram o contrário aqui.

Isso é uma peculiaridade no meu navegador (Chromium 6)? Ou existe uma maneira mais rápida?

EDIT: Para quem se importa, decidi o seguinte (que parece ser o mais rápido em todos os navegadores que testei):

//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: Encontrei uma maneira ainda mais rápida

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

O segundo tende a ser mais rápido em alguns navegadores, mas o ponto principal é que você precisa usá-lo porque o primeiro não é apenas um navegador cruzado. Mesmo que os tempos estejam mudando

@kangax ( pré-visualização do IE 9 )

Agora, o Array.prototype.slice pode converter determinados objetos do host (por exemplo, NodeList) em arrays - algo que a maioria dos navegadores modernos consegue fazer há um bom tempo.

Exemplo:

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

Com o ES6, agora temos uma maneira simples de criar uma matriz a partir de uma NodeList: a Array.from()função

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

Aqui está uma nova maneira interessante de fazer isso usando o operador de spread ES6 :

let arr = [...nl];

Algumas otimizações:

• salve o comprimento do NodeList em uma variável
• defina explicitamente o comprimento da nova matriz antes da configuração.
• acessar os índices, em vez de pressionar ou não mudar.

Código ( jsPerf ):

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

Os resultados dependerão completamente do navegador, para dar um veredicto objetivo, temos que fazer alguns testes de desempenho, aqui estão alguns resultados, você pode executá-los aqui :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Prévia da plataforma IE9 3:

O navegador mais rápido e cruzado é

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

Como eu comparei em

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

* Obrigado @CMS pela ideia!

No ES6, você pode usar:

• Array.from

  let array = Array.from(nodelist)

• Operador de propagação

  let array = [...nodelist]

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

Agora você pode fazer document.querySelectorAll ('div'). ForEach (function () ...)

mais rápido e mais curto:

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

Confira este post aqui que fala sobre a mesma coisa. Pelo que entendi, o tempo extra pode ter a ver com subir a cadeia de escopo.

Esta é a função que eu uso no meu JS:

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

Aqui estão os gráficos atualizados na data desta postagem (o gráfico "plataforma desconhecida" é o Internet Explorer 11.15.16299.0):

A partir desses resultados, parece que o método de pré-alocação 1 é a aposta mais segura entre navegadores.

Supondo que nodeList = document.querySelectorAll("div")esta seja uma forma concisa de conversão nodelistem matriz.

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

Veja-me usá-lo aqui .