Le moyen le plus efficace de convertir un HTMLCollection en un tableau

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

let arry = [...htmlCollection] 

Edit: un autre, de Chris_F commentaire:

let arry = Array.from(htmlCollection)

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

[].slice.call( yourHTMLCollectionObject );

Et, comme mentionné dans les commentaires, pour les anciens navigateurs tels que IE7 et plus tôt, 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 j'ai senti que la réponse acceptée était un peu incomplète; alors j'ai pensé que je jeterais ceci là-bas FWIW.

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

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

Il n'utilise pas Array.prototype.slice probablement parce qu'il n'est pas disponible sur tous les navigateurs. J'ai peur que la performance soit assez mauvaise car il y a une boucle javascript sur le iterable.

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

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

Puisque jsperf est toujours en panne pour le moment, voici un jsfiddle qui compare les performances des différentes méthodes. https://jsfiddle.net/qw9qf48j/

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

Si le navigateur prend en charge la meilleure façon, ok, sinon utilisera le navigateur croisé.

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

MakeArray: Convertit un objet de type tableau en un vrai tableau JavaScript.

Utilisation:

var domArray = jQuery.makeArray(htmlCollection);

Un peu plus:

Si vous ne voulez pas garder une référence à l'objet array (la plupart du temps, HTMLCollections change 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 que le tableau?

HTMLCollection est un objet "array-like", les objets de type tableau sont similaires à l'objet du tableau mais manquent beaucoup de sa définition fonctionnelle:

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