Parfois, nous voulons convertir un objet HTMLCollection en un tableau JavaScript.

De cette façon, nous pouvons utiliser des méthodes de tableau pour manipuler des objets d'élément HTML dans l'objet HTMLCollection.

Dans cet article, nous verrons comment convertir une HTMLCollection en un tableau.

Array.prototype.slice

Une façon de convertir une HTMLCollection en un tableau JavaScript consiste à utiliser la sliceméthode.

Par exemple, si nous avons plusieurs éléments :

<div>
  foo
</div>
<div>
  bar
</div>
<div>
  baz
</div>

const divs = document.querySelectorAll('div')
const arr = Array.prototype.slice.call(divs)
console.log(arr)

Nous appelons simplement sliceavec divset cela renverra les objets de l'élément div dans un tableau.

On peut aussi le raccourcir à :

const divs = document.querySelectorAll('div')
const arr = [].slice.call(divs)
console.log(arr)

Cela fait la même chose que slice slicerenvoie un nouveau tableau.

Array.from

Nous pouvons utiliser la Array.fromméthode pour convertir un objet de type tableau ou itérable en un tableau.

Puisqu'une HTMLCollection est un objet itérable, nous pouvons la transmettre à la Array.fromméthode.

Par exemple, on peut écrire :

const divs = document.querySelectorAll('div')
const arr = Array.from(divs)
console.log(arr)

Opérateur de propagation

L'opérateur spread nous permet également de convertir un objet itérable en un tableau.

On peut donc faire la même chose en écrivant :

const divs = document.querySelectorAll('div')
const arr = [...divs]
console.log(arr)

Nous pouvons également utiliser la pushméthode avec l'opérateur spread pour pousser des objets d'élément dans une HTMLCollection dans un tableau.

Par exemple, on peut écrire :

const divs = document.querySelectorAll('div')
const arr = []
arr.push(...divs)
console.log(arr)

Et puis ils seront tous poussés vers arr.

Array.prototype.concat and the Spread Operator

La concatméthode array nous permet également d'ajouter des éléments à un tableau en les transmettant à la méthode en tant qu'arguments.

Par conséquent, nous pouvons les utiliser comme pushpour ajouter des éléments dans le tableau.

Par exemple, on peut écrire :

const divs = document.querySelectorAll('div')
const arr = [].concat(...divs)
console.log(arr)

A donc arrla même valeur que les exemples précédents.

Conclusion

Nous pouvons convertir un objet HTMLCollection en un tableau avec diverses méthodes de tableau ou l'opérateur spread.

Plus de contenu sur plainenglish.io