Como converter HTMLCollection para array em JavaScript

Neste artigo você vai aprender a como converter HTMLCollection para array em JavaScript, com uma maneira performática

converter HTMLCollection para array capa

Fala programador(a), beleza? Bora aprender mais sobre HTMLCollection, arrays e JavaScript!

Temos diversas maneiras de transformar uma HTMLCollection em um array

Formação Claude Code
Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

  • 118 aulas
  • 4 projetos
  • 9h 33min

A mais simples possívels, e também performática, é utilizando o spread operator

Este recurso foi adicionado na versão ES6 da linguagem JavaScript

O código consiste em:

const array = [...myHTMLCollection]

Aqui estamos criando uma variável chamada array com o resultado do spread em uma HTMLCollection

Note que você mudar o nome da variável myHTMLCollection para o nome da sua collection

Este código transformará a collection em uma lista, e você poderá utilizar como um array normalmente, simples não é? 🙂

Conclusão

Neste artigo você viu como converter HTMLCollection para array em JavaScript

Utilizamos o Spread Operator, um recurso muito interessante para formar arrays

Esta técnica foi introduzida na versão ECMAScript 2015 de JavaScript, também conhecida como ES6

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Escrito por | Matheus Battisti

Matheus Battisti
Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Subscribe
Notify of
guest

1 Comentário
Oldest
Newest Most Voted
Guilherme

além dos motivos de poder trabalhar com métodos funcionais apenas em arrays, existe algum outro motivo de fazer essa conversão?

Formações

Formação Vibe Coding

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Blog | Mais populares