
JavaScript : Comment convertir une Collection en un Array
#1
Précision sur le vocabulaire
J'appelle une collection un objet semblable à un tableau en ce sens qu'elle a une propriété length
et des propriétés qui sont indexées. Toutefois une collection n'est pas dotée des méthodes de l'objet de constructeur Array()
: forEach
, map
, filter
, reduce
, slice
, push
, pop
...ect
Le plus souvent une collection se parcourt avec une boucle for
. On trouve beaucoup de collections lorsque l'on manipule le DOM.
#2
La méthode
Pour convertir une collection en un objet de constructeur Array()
de manière à avoir accès aux méthodes de Array()
procédez comme suit :
- Vous prenez un objet de constructeur
Array()
en tapant[]
. - Vous appelez la méthode
slice
. - Vous appelez la méthode
call
. - Vous passez une collection en argument du
call
. - Vous récupérez un
Array()
et ses méthodes sont maintenant à votre disposition.

Grosso modo comment ça marche ?
- Avec les doubles crochets
[]
on alloue un tableau vide de constructeurArray
. - Ceci nous permet d'accéder à
slice
qui est une méthode des objets de constructeurArray
. - Maintenant on passe au
call
. C'est lecall
qui en affectant lethis
permet de faire travaillerslice
sur la collection passée en argument ducall
. - Cependant il n'y a pas de deuxième argument au
call
ce qui fait que la méthodeslice
est appelée sans argument et dans ce cas elle renvoie la copie du tableau sur lequel elle travaille. - Et le tableau renvoyé par tout ça c'est un
Array
puisque au départ on a déclaré unArray
.
Ca c'est une sorte de formule qui a le mérite d'être ancienne et de fonctionner sur la plupart des navigateurs. Il y a d'autres méthodes plus récentes mais au niveau de la compatibilité des navigateurs c'est moins bien couvert. Ca peut évoluer et ça évoluera. Moi je vous donne une méthode qui devrait marcher partout et qui peut vous servir surtout sur les collections de constructeur HTMLCollection
. Ce sont les collections qui sont renvoyées par des getElementsByClassName
, getElementsByTagName
lorsque vous travaillez sur le DOM. Et c'est dans ces situations là que se manifeste le plus souvent le besoin de convertir des Collection
en Array
.
#3
Un exemple
Ici j'ai choisi un exemple avec le tableau arguments
. Ce n'est pas une HTMLCollection
mais c'est aussi une situation où ce besoin de conversion a été utilisé. Je dis a été car aujourd'hui avec le paramètre du reste il est moins utilisé. Mais c'est toujours pareil lorsque vous développez un logiciel il y a le code que vous produisez et bien souvent le code que vous récupérez. Et là lorsque vous récupérez du code surtout dans un langage comme JavaScript qui a passé son temps à évoluer vous aurez certainement besoin de travailler sur des versions anciennes.
Dans cet exemple je vais convertir la collection arguments
en un tableau tab
de constructeur Array()
.
Pour cela je vais :
- Déclarer une fonction
collectionToArray
. - La fonction va prendre une liste d'arguments ici
1,2,3
. Ces arguments vont constituer le tableauarguments
qui est passé de manière implicite à toute fonction. Ce tableau n'est pas unArray()
mais une simple collection. - J'appelle ensuite la méthode
slice
qui est une méthode deArray()
et qui va retourner un tableauArray()
. La méthodeslice
telle qu'elle est appelée ici retourne le même tableau que celui qu'elle prend en entrée. - Avec le
call
je passe àslice
unthis
qui pointe surarguments
. - Je récupère ensuite le tableau
tab
et je vérifie que je peux faire unforEach
dessus (* méthode de Array).
