Publicado em 1º de maio de 2025
Se você escreve JavaScript, a iteração é algo que você faz muito. Você está escrevendo loops para trabalhar com matrizes ou usando métodos de programação funcional, como map, filter e outros métodos semelhantes para processar todos os tipos de dados.
No entanto, um ponto negativo do uso desses métodos é que eles estão disponíveis apenas em matrizes. Se você quisesse usá-los em um iterável, seria necessário convertê-lo em uma matriz e chamar o método necessário. Isso pode ser um desperdício ou, nos casos em que a interável representa um conjunto de dados infinito usando funções de gerador, não é possível. No entanto, agora que os auxiliares de iteração estão disponíveis como padrão, essa capacidade finalmente está disponível em todos os navegadores.
Como os helpers de iterador funcionam?
Os auxiliares de iterador são expostos ao definir novos métodos no prototype do objeto Iterator. Esses métodos são alinhados a muitos métodos de programação funcional que você já usa, como map, filter, reduce e outros métodos semelhantes.
Por exemplo, é possível usar um auxiliar de iterador no método filter para filtrar itens da lista pelo conteúdo da propriedade innerText de uma coleção de nós DOM, que podem ser usados mais tarde em um loop for:
const posts = document.querySelectorAll("ul#specific-list > li")
.values()
.filter(item => item.textContent.includes("kiwi"));
// For-of loops can only be used on iterables, which `posts` is!
for (const post of posts) {
console.log(post.textContent);
}
No snippet de código anterior, o método auxiliar de iteração para filter é usado para iterar todos os elementos <li> em um elemento <ul> específico. Os critérios de filtragem são que o conteúdo de texto de cada elemento precisa conter uma substring de "kiwi".
Os auxiliares de iteração também podem ser usados com funções de gerador. Neste exemplo, uma função de gerador que calcula fatores, mas usa o auxiliar de iteração para filtrar valores divisíveis por 8 e registrar os cinco primeiros valores filtrados no console:
function* factorials (n) {
let result = 1;
for (let i = 1; i <= n; i++) {
result *= i;
yield result;
}
}
const filteredFactorials = factorials(128).filter(x => x % 8 === 0);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
console.log(filteredFactorials.next().value);
O snippet de código anterior é um exemplo de algo que não seria possível com os auxiliares de iteração, porque o número de fatores é infinito e não pode ser convertido em uma matriz.
Dependendo da situação, os auxiliares de iteração têm muito potencial e estão disponíveis para cada um desses métodos iteráveis:
As possibilidades de casos de uso de auxiliares de iteração são vastas e podem melhorar significativamente a ergonomia do desenvolvedor. Agora que eles estão disponíveis como referência, você pode usá-los sem medo de problemas de compatibilidade. Para mais informações, confira os seguintes recursos: