Il modo più efficiente per convertire un HTMLCollection in un array

Esiste un modo più efficiente per convertire un HTMLCollection in un array, oltre a scorrere i contenuti di detta raccolta e spingere manualmente ciascun elemento in un array?

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

avrà lo stesso effetto usando il codice "nativo".

modificare

Dato che questo ottiene molte visualizzazioni, nota (per il commento di @ oriol) che la seguente espressione più concisa è effettivamente equivalente:

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

Ma nota per il commento di @ JussiR, che a differenza della forma "dettagliata", crea un'istanza di matrice vuota, inutilizzata e davvero inutilizzabile nel processo. Ciò che i compilatori fanno al riguardo è al di fuori del ken del programmatore.

modificare

Da ECMAScript 2015 (ES 6) esiste anche Array.from :

var arr = Array.from(htmlCollection);

modificare

ECMAScript 2015 fornisce anche l' operatore spread , che è funzionalmente equivalente a Array.from(sebbene si noti che Array.fromsupporta una funzione di mappatura come secondo argomento).

var arr = [...htmlCollection];

Ho confermato che entrambi i suddetti lavori su NodeList.

Un confronto delle prestazioni per i metodi citati: http://jsben.ch/h2IFA

non sono sicuro se questo sia il più efficiente, ma una sintassi ES6 concisa potrebbe essere:

let arry = [...htmlCollection] 

Modifica: un altro, dal commento di Chris_F:

let arry = Array.from(htmlCollection)

Ho visto un metodo più conciso per ottenere Array.prototypemetodi in generale che funziona altrettanto bene. La conversione di un HTMLCollectionoggetto in un Arrayoggetto è illustrata di seguito:

[] .slice.call (yourHTMLCollectionObject);

E, come menzionato nei commenti, per i vecchi browser come IE7 e precedenti, devi semplicemente usare una funzione di compatibilità, come:

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

    return a
}

So che questa è una vecchia domanda, ma ho sentito che la risposta accettata era un po 'incompleta; quindi ho pensato di buttarlo qui FWIW.

Per un'implementazione cross-browser ti suggerisco di guardare la funzione prototype.js $A

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

Probabilmente non lo usa Array.prototype.sliceperché non è disponibile su tutti i browser. Temo che le prestazioni siano piuttosto cattive in quanto un fallback è un ciclo javascript su iterable.

Questa è la mia soluzione personale, basata sulle informazioni qui (questo thread):

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

Dove $ A è stato descritto da Gareth Davis nel suo 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 il browser supporta il modo migliore, ok, altrimenti utilizzerà il browser incrociato.

Funziona in tutti i browser, comprese le versioni precedenti di IE.

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

Poiché jsperf è ancora inattivo al momento, ecco un jsfiddle che confronta le prestazioni di diversi metodi. https://jsfiddle.net/qw9qf48j/

Per convertire array-like in array in modo efficiente, possiamo usare jQuery makeArray :

makeArray: converte un oggetto simile ad un array in un vero array JavaScript.

Uso:

var domArray = jQuery.makeArray(htmlCollection);

Un piccolo extra:

Se non si desidera mantenere il riferimento all'oggetto array (la maggior parte delle volte le HTMLCollections vengono modificate in modo dinamico, quindi è meglio copiarle in un altro array, in questo esempio prestare molta attenzione alle prestazioni:

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

Che cos'è un array?

HTMLCollection è un "array-like"oggetto, l' array come oggetti sono simili all'oggetto della matrice ma manca un sacco della sua definizione funzionale:

Gli oggetti simili a matrici sembrano matrici. Hanno vari elementi numerati e una proprietà di lunghezza. Ma è lì che si ferma la somiglianza. Gli oggetti simili a array non hanno alcuna funzione di array e i loop di for-in non funzionano nemmeno!