Array, NodeList e outros iteráveis em Javascript: qual a diferença?

Vocês também já receberam o erro abaixo:

document.querySelectorAll(...).map is not a function

Isso acontece porque o .map() é um método apenas de array, e o que o .querySelectorAll() retorna não é um array 🤯

Sim, o que ele retorna é um Nodelist, uma estrutura de dados em Javascript que é tipo array, mas não é array. É tipo net.

Tem outras como o nodelist?

  • HTMLCollection
  • DOMTokenList
  • NamedNodeMap

Apesar da confusão com o .map(), todos ainda têm coisas em comum:

  • São iteráveis com o comando for
  • Você pode descobrir o tamanho da lista com o .length
  • E também pode acessar um item da lista com a notação de colchetes list.[3]

Existem ainda vários detalhes sobre elas, como:

  • Live collection e static collection
  • Como descobrir os métodos que cada estrutura de dados acesso
  • Como criar essas estrutura de dados
  • Alguns casos de uso de cada uma delas
  • Compatibilidade

Expliquei tudo isso no meu blog, pode conferir no link das fontes :D

gaidoano passado

Interessante seu artigo. Faltou colocar uma dica de ouro. Para transformar um NodeList em um array é muito simples. Ao invés de:

document.querySelectorAll(meu_seletor)

faça:

[...document.querySelectorAll(meu_seletor)]

Referência: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

deMenezesano passado
Perfeito. Não quis adicionar isso pq já vou criar um post para falar apenas disso Spoiler: tem 3 formas de converter um array-like em array, eu achava que havia apenas 2.
gaidoano passado
Coisa linda. Está certo, meu querido.
AdonisMendesano passado

Opa, isso sao prototypes que herdam métodos como o "map" ou uma string q tem um prototype string e herda métodos como "indexOf"

deMenezesano passado
Opa, Adonis. Beleza? Nenhum dos dois hehehehe Eles não são prototypes, e sim outros tipos de iteráveis em Javascript além do array. No caso é possível percorrer os itens deles com for, for/of e alguns até com o forEach(). De todos eles, o único que pode usar o .map() é o array. Se tentar com os demais, vai acontecer o erro "map() is not a function". Nenhum deles é string, se verificar o tipo deles com typeof, vai ver que todos são objetos, assim como a array.