A maneira mais eficiente de converter uma coleção HTMLC em uma matriz

Existe uma maneira mais eficiente de converter uma HTMLCollection em uma matriz, além de iterar pelo conteúdo da coleção e empurrar manualmente cada item em uma matriz?

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

terá o mesmo efeito usando o código "nativo".

Editar

Como isso gera muitas visualizações, observe (por comentário de @ oriol) que a seguinte expressão mais concisa é efetivamente equivalente:

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

Mas observe pelo comentário do @ JussiR, que, diferentemente da forma "detalhada", ele cria uma instância de matriz vazia, não utilizada e de fato inutilizável no processo. O que os compiladores fazem sobre isso está fora do alcance do programador.

Editar

Desde o ECMAScript 2015 (ES 6), também existe o Array.from :

var arr = Array.from(htmlCollection);

Editar

O ECMAScript 2015 também fornece o operador de spread , que é funcionalmente equivalente a Array.from(embora observe que Array.fromsuporta uma função de mapeamento como o segundo argumento).

var arr = [...htmlCollection];

Confirmei que ambos os trabalhos acima funcionam NodeList.

Uma comparação de desempenho para os métodos mencionados: http://jsben.ch/h2IFA

não tenho certeza se essa é a mais eficiente, mas uma sintaxe concisa do ES6 pode ser:

let arry = [...htmlCollection] 

Edit: Outro, do comentário Chris_F:

let arry = Array.from(htmlCollection)

Eu vi um método mais conciso de obter Array.prototypemétodos em geral que também funciona. A conversão de um HTMLCollectionobjeto em um Arrayobjeto é demonstrada abaixo:

[] .slice.call (yourHTMLCollectionObject);

E, como mencionado nos comentários, para navegadores antigos como o IE7 e versões anteriores, basta usar uma função de compatibilidade, como:

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

    return a
}

Sei que essa é uma pergunta antiga, mas achei que a resposta aceita era um pouco incompleta; então pensei em lançar isso lá fora, FWIW.

Para uma implementação entre navegadores, sugiro que você analise a função prototype.js $A

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;
}

Provavelmente não é usado Array.prototype.sliceporque não está disponível em todos os navegadores. Receio que o desempenho seja muito ruim, pois há um retorno de javascript sobre o iterable.

Esta é a minha solução pessoal, com base nas informações aqui (este tópico):

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

Onde $ A foi descrito por Gareth Davis em seu post:

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;
}

Se o navegador suportar da melhor maneira, ok, caso contrário, usará o navegador cruzado.

Isso funciona em todos os navegadores, incluindo versões anteriores do IE.

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

Como o jsperf ainda está inativo no momento, aqui está um jsfiddle que compara o desempenho de diferentes métodos. https://jsfiddle.net/qw9qf48j/

Para converter de matriz para matriz de maneira eficiente, podemos usar o jQuery makeArray :

makeArray: converte um objeto semelhante a um array em um verdadeiro array JavaScript.

Uso:

var domArray = jQuery.makeArray(htmlCollection);

Um pouco mais:

Se você não deseja manter a referência ao objeto da matriz (na maioria das vezes, as HTMLCollections são alteradas dinamicamente, portanto é melhor copiá-las para outra matriz. Este exemplo presta muita atenção ao desempenho:

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.
}

O que é semelhante a um array?

HTMLCollection é um "array-like"objeto, os objetos do tipo matriz são semelhantes ao objeto da matriz, mas perdem grande parte de sua definição funcional:

Objetos semelhantes a matrizes parecem matrizes. Eles têm vários elementos numerados e uma propriedade length. Mas é aí que a semelhança para. Os objetos do tipo matriz não possuem nenhuma das funções da matriz e os loops de entrada nem funcionam!