Le moyen le plus efficace pour convertir une HTMLCollection en tableau

Existe-t-il un moyen plus efficace de convertir une HTMLCollection en tableau, autre que d'itérer à travers le contenu de ladite collection et de pousser manuellement chaque élément dans un tableau?

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

aura le même effet en utilisant du code "natif".

Éditer

Comme cela obtient beaucoup de vues, notez (selon le commentaire de @ oriol) que l'expression plus concise suivante est effectivement équivalente:

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

Mais notez selon le commentaire de @ JussiR, que contrairement au formulaire "verbeux", il crée une instance de tableau vide, inutilisée et en fait inutilisable dans le processus. Ce que les compilateurs font à ce sujet est en dehors du ken du programmeur.

Éditer

Depuis ECMAScript 2015 (ES 6) il y a aussi Array.from :

var arr = Array.from(htmlCollection);

Éditer

ECMAScript 2015 fournit également l' opérateur d'étalement , qui est fonctionnellement équivalent à Array.from(bien que la note prenne en Array.fromcharge une fonction de mappage comme deuxième argument).

var arr = [...htmlCollection];

J'ai confirmé que les deux ci-dessus fonctionnent NodeList.

Une comparaison des performances pour les méthodes mentionnées: http://jsben.ch/h2IFA

Je ne sais pas si c'est le plus efficace, mais une syntaxe ES6 concise pourrait être:

let arry = [...htmlCollection] 

Edit: Un autre, du commentaire de Chris_F:

let arry = Array.from(htmlCollection)

J'ai vu une méthode plus concise pour obtenir des Array.prototypeméthodes en général qui fonctionne aussi bien. La conversion d'un HTMLCollectionobjet en Arrayobjet est illustrée ci-dessous:

[] .slice.call (votreHTMLCollectionObject);

Et, comme mentionné dans les commentaires, pour les anciens navigateurs tels que IE7 et les versions antérieures, vous devez simplement utiliser une fonction de compatibilité, comme:

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

    return a
}

Je sais que c'est une vieille question, mais je sentais que la réponse acceptée était un peu incomplète; donc je pensais que je jetterais ça là FWIW.

Pour une implémentation multi-navigateur, je vous suggère de regarder la fonction prototype.js $A

copié depuis 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;
}

Il n'utilise Array.prototype.sliceprobablement pas car il n'est pas disponible sur tous les navigateurs. Je crains que les performances ne soient assez mauvaises car il y a un repli est une boucle javascript sur le iterable.

Ceci est ma solution personnelle, basée sur les informations ici (ce fil):

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

Où $ A a été décrit par Gareth Davis dans son article:

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 le navigateur prend en charge la meilleure façon, ok, sinon, vous utiliserez le navigateur croisé.

Cela fonctionne dans tous les navigateurs, y compris les versions antérieures d'IE.

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

Étant donné que jsperf est toujours en panne pour le moment, voici un jsfiddle qui compare les performances de différentes méthodes. https://jsfiddle.net/qw9qf48j/

Pour convertir un tableau en tableau de manière efficace, nous pouvons utiliser jQuery makeArray :

makeArray: convertit un objet de type tableau en un véritable tableau JavaScript.

Usage:

var domArray = jQuery.makeArray(htmlCollection);

Un petit plus:

Si vous ne souhaitez pas conserver de référence à l'objet tableau (la plupart du temps, HTMLCollections est modifié dynamiquement, il est donc préférable de les copier dans un autre tableau, cet exemple porte une attention particulière aux performances:

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'est-ce qu'un tableau?

HTMLCollection est un "array-like"objet, semblable à un tableau d' objets sont similaires à l'objet de tableau mais il manque beaucoup de sa définition fonctionnelle:

Les objets de type tableau ressemblent à des tableaux. Ils ont divers éléments numérotés et une propriété de longueur. Mais c'est là que la similitude s'arrête. Les objets de type tableau n'ont aucune fonction de tableau et les boucles for-in ne fonctionnent même pas!