La forma más eficiente de convertir una colección HTMLC en una matriz

¿Existe una forma más eficiente de convertir una colección HTMLC en una matriz, que no sea iterar a través del contenido de dicha colección y empujar manualmente cada elemento en una matriz?

var arr = Array.prototype.slice.call( htmlCollection )

tendrá el mismo efecto usando el código "nativo".

Editar

Dado que esto obtiene muchas vistas, tenga en cuenta (según el comentario de @ oriol) que la siguiente expresión más concisa es efectivamente equivalente:

var arr = [].slice.call(htmlCollection);

Pero tenga en cuenta según el comentario de @ JussiR, que a diferencia de la forma "detallada", crea una instancia de matriz vacía, no utilizada y, de hecho, inutilizable en el proceso. Lo que los compiladores hacen al respecto está fuera del conocimiento del programador.

Editar

Desde ECMAScript 2015 (ES 6) también existe Array.from :

var arr = Array.from(htmlCollection);

Editar

ECMAScript 2015 también proporciona el operador de propagación , que es funcionalmente equivalente a Array.from(aunque tenga en cuenta que Array.fromadmite una función de mapeo como segundo argumento).

var arr = [...htmlCollection];

He confirmado que ambos de los anteriores funcionan NodeList.

Una comparación de rendimiento para los métodos mencionados: http://jsben.ch/h2IFA

No estoy seguro si este es el más eficiente, pero una sintaxis concisa de ES6 podría ser:

let arry = [...htmlCollection] 

Editar: Otro, del comentario de Chris_F:

let arry = Array.from(htmlCollection)

Vi un método más conciso para obtener Array.prototypemétodos en general que funciona igual de bien. La conversión de un HTMLCollectionobjeto en un Arrayobjeto se muestra a continuación:

[] .slice.call (yourHTMLCollectionObject);

Y, como se menciona en los comentarios, para navegadores antiguos como IE7 y anteriores, simplemente tiene que usar una función de compatibilidad, como:

function toArray(x) {
    for(var i = 0, a = []; i < x.length; i++)
        a.push(x[i]);

    return a
}

Sé que esta es una vieja pregunta, pero sentí que la respuesta aceptada estaba un poco incompleta; así que pensé en tirar esto por ahí FWIW.

Para una implementación de navegador cruzado, te sugiero que mires prototype.js $A función

copiado de 1.6.1 :

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

Array.prototype.sliceProbablemente no se use porque no está disponible en todos los navegadores. Me temo que el rendimiento es bastante malo, ya que el retroceso es un bucle de JavaScript sobre el iterable.

Esta es mi solución personal, basada en la información aquí (este hilo):

var Divs = new Array();    
var Elemns = document.getElementsByClassName("divisao");
    try {
        Divs = Elemns.prototype.slice.call(Elemns);
    } catch(e) {
        Divs = $A(Elemns);
    }

Donde $ A fue descrito por Gareth Davis en su publicación:

function $A(iterable) {
  if (!iterable) return [];
  if ('toArray' in Object(iterable)) return iterable.toArray();
  var length = iterable.length || 0, results = new Array(length);
  while (length--) results[length] = iterable[length];
  return results;
}

Si el navegador admite la mejor manera, está bien, de lo contrario usará el navegador cruzado.

Esto funciona en todos los navegadores, incluidas las versiones anteriores de IE.

var arr = [];
[].push.apply(arr, htmlCollection);

Dado que jsperf todavía está inactivo en este momento, aquí hay un jsfiddle que compara el rendimiento de diferentes métodos. https://jsfiddle.net/qw9qf48j/

Para convertir una matriz en matriz de manera eficiente, podemos hacer uso de jQuery makeArray :

makeArray: convierte un objeto tipo matriz en una verdadera matriz de JavaScript.

Uso:

var domArray = jQuery.makeArray(htmlCollection);

Un poco extra:

Si no desea mantener una referencia al objeto de matriz (la mayoría de las veces, las colecciones HTMLC cambian dinámicamente, por lo que es mejor copiarlas en otra matriz, este ejemplo presta mucha atención al rendimiento:

var domDataLength = domData.length //Better performance, no need to calculate every iteration the domArray length
var resultArray = new Array(domDataLength) // Since we know the length its improves the performance to declare the result array from the beginning.

for (var i = 0 ; i < domDataLength ; i++) {
    resultArray[i] = domArray[i]; //Since we already declared the resultArray we can not make use of the more expensive push method.
}

¿Qué es una matriz?

Colección HTMLC es un "array-like"objeto, el tipo array objetos son similares a objeto de matriz, pero falta una gran cantidad de su definición funcional:

Los objetos en forma de matriz se ven como matrices. Tienen varios elementos numerados y una propiedad de longitud. Pero ahí es donde se detiene la similitud. Los objetos tipo matriz no tienen ninguna de las funciones de la matriz, ¡y los bucles for-in ni siquiera funcionan!