Fecha de publicación: 1 de mayo de 2025
Si escribes JavaScript, la iteración es algo que haces mucho. Escribes bucles para trabajar con arrays o usas métodos de programación funcional, como map, filter y otros métodos similares para procesar todo tipo de datos.
Sin embargo, un inconveniente de usar estos métodos es que solo están disponibles en arrays. Si quieres usarlos en un elemento iterable, debes convertirlo en un array y, luego, llamar al método que necesites. Esto puede ser un desperdicio o, en los casos en que el interable representa un conjunto de datos infinito con funciones generadoras, no es posible. Sin embargo, ahora que los ayudantes de iterador se convirtieron en Baseline Newly available, esta función finalmente está disponible en todos los navegadores.
¿Cómo funcionan los ayudantes de iterador?
Los ayudantes de iterador se exponen definiendo métodos nuevos en el prototype del objeto Iterator. Estos métodos se alinean con muchos métodos de programación funcional que ya conoces, como map, filter, reduce y otros métodos similares.
Por ejemplo, puedes usar un auxiliar de iterador en el método filter para filtrar los elementos de lista según el contenido de su propiedad innerText para una colección de nodos DOM, que luego puedes usar en un bucle 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);
}
En el fragmento de código anterior, se usa el método auxiliar del iterador para filter para iterar por todos los elementos <li> en un elemento <ul> específico. El criterio de filtrado es que el contenido de texto de cada elemento debe contener una subcadena de "kiwi".
Los ayudantes de iterador también se pueden usar con funciones generadoras. En este ejemplo, se muestra una función generadora que calcula factoriales, pero usa el auxiliar de iterador para filtrar los valores que son divisibles por 8 y registrar los primeros cinco valores filtrados en la consola:
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);
En particular, el fragmento de código anterior es un ejemplo de algo que no sería posible con los ayudantes de iterador, ya que la cantidad de factoriales es infinita y no es algo que puedas convertir en un array de otra manera.
Según tu situación, los ayudantes de iteradores tienen mucho potencial y están disponibles para cada uno de estos métodos iterables:
Las posibilidades de casos de uso de ayudantes de iteradores son amplias y pueden proporcionar un impulso significativo en la ergonomía de los desarrolladores. Ahora que están disponibles en Baseline, con el tiempo deberías tener cada vez más confianza en que puedes usarlos sin temor a tener problemas de compatibilidad. Para obtener más información, consulta los siguientes recursos: