¿La forma más rápida de convertir JavaScript NodeList a Array?

Las preguntas respondidas anteriormente aquí dijeron que esta era la forma más rápida:

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

Al realizar una evaluación comparativa en mi navegador, descubrí que es más de 3 veces más lento que esto:

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

Ambos producen el mismo resultado, pero me resulta difícil creer que mi segunda versión sea la forma más rápida posible, especialmente porque la gente ha dicho lo contrario aquí.

¿Es esto una peculiaridad en mi navegador (Chromium 6)? ¿O hay una manera más rápida?

EDITAR: Para cualquier persona que se preocupe, me decidí por lo siguiente (que parece ser el más rápido en todos los navegadores que probé):

//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: encontré una forma aún más rápida

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

El segundo tiende a ser más rápido en algunos navegadores, pero el punto principal es que debe usarlo porque el primero simplemente no es cruzado. A pesar de que The Times They are a-Changin '

@kangax ( vista previa de IE 9 )

Array.prototype.slice ahora puede convertir ciertos objetos host (por ejemplo, NodeList) en matrices, algo que la mayoría de los navegadores modernos han podido hacer durante bastante tiempo.

Ejemplo:

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

Con ES6, ahora tenemos una forma sencilla de crear una matriz a partir de una NodeList: la Array.from()función.

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

Aquí hay una nueva forma genial de hacerlo utilizando el operador de propagación ES6 :

let arr = [...nl];

Algunas optimizaciones:

• guardar la longitud de la NodeList en una variable
• establezca explícitamente la longitud de la nueva matriz antes de configurar.
• acceder a los índices, en lugar de empujar o no cambiar.

Código ( jsPerf ):

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

Los resultados dependerán completamente del navegador, para dar un veredicto objetivo, tenemos que hacer algunas pruebas de rendimiento, aquí hay algunos resultados, puede ejecutarlos aquí :

Chrome 6:

Firefox 3.6:

Firefox 4.0b2:

Safari 5:

Vista previa de la plataforma IE9 3:

El navegador más rápido y cruzado es

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

Como lo comparé en

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

* ¡Gracias @CMS por la idea!

En ES6 puedes usar:

• Array.from

  let array = Array.from(nodelist)

• Operador extendido

  let array = [...nodelist]

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

Ahora puede hacer document.querySelectorAll ('div'). ForEach (function () ...)

más rápido y más corto:

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

Mira esta publicación de blog aquí que habla sobre lo mismo. Por lo que deduzco, el tiempo extra podría tener que ver con subir la cadena del telescopio.

Esta es la función que uso en mi JS:

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

Aquí hay gráficos actualizados a la fecha de esta publicación (el cuadro de "plataforma desconocida" es Internet Explorer 11.15.16299.0):

A partir de estos resultados, parece que el método de preasignación 1 es la apuesta más segura entre navegadores.

Suponiendo nodeList = document.querySelectorAll("div"), esta es una forma concisa de convertir nodelista matriz.

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

Véame usarlo aquí .