Publié le 1er mai 2025
Si vous écrivez du code JavaScript, vous effectuez de nombreuses itérations. Vous écrivez des boucles pour travailler avec des tableaux ou utilisez des méthodes de programmation fonctionnelle telles que map, filter et d'autres méthodes similaires pour traiter toutes sortes de données.
Cependant, l'utilisation de ces méthodes présente un inconvénient : elles ne sont disponibles que sur les tableaux. Si vous souhaitez les utiliser sur un itérable, vous devez le convertir en tableau, puis appeler la méthode dont vous avez besoin. Cela peut être un gaspillage, ou dans les cas où l'interable représente un ensemble de données infini à l'aide de fonctions génératrices, ce n'est pas possible. Toutefois, maintenant que les assistants d'itérateurs sont disponibles en tant que nouvelle référence, cette fonctionnalité est enfin disponible dans tous les navigateurs.
Comment fonctionnent les assistants d'itérateur ?
Les assistants d'itérateur sont exposés en définissant de nouvelles méthodes sur le prototype de l'objet Iterator. Ces méthodes correspondent à de nombreuses méthodes de programmation fonctionnelle que vous utilisez habituellement, telles que map, filter, reduce et d'autres méthodes similaires.
Par exemple, vous pouvez utiliser un assistant d'itérateur sur la méthode filter pour filtrer les éléments de liste en fonction du contenu de leur propriété innerText pour une collection de nœuds DOM, que vous pourrez ensuite utiliser dans une boucle 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);
}
Dans l'extrait de code précédent, la méthode d'assistance de l'itérateur pour filter permet d'itérer sur tous les éléments <li> d'un élément <ul> spécifique. Les critères de filtrage sont les suivants : le contenu textuel de chaque élément doit contenir une sous-chaîne de "kiwi".
Les assistants d'itérateur peuvent également être utilisés avec des fonctions génératrices. Dans cet exemple, une fonction génératrice qui calcule les factorielles, mais qui utilise l'outil d'assistance de l'itérateur pour filtrer les valeurs en fonction de celles qui sont divisibles par 8, et consigne les cinq premières valeurs filtrées dans la 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);
Plus précisément, l'extrait de code précédent est un exemple de chose qui ne serait pas possible avec les assistants d'itérateur, car le nombre de facteurs est infini et ne peut pas être converti en tableau.
Selon votre situation, les assistants d'itérateurs ont un grand potentiel. Ils sont disponibles pour chacune des méthodes itérables suivantes:
Les possibilités de cas d'utilisation de l'aide à l'itérateur sont vastes et peuvent améliorer considérablement l'ergonomie pour les développeurs. Maintenant qu'ils sont disponibles en tant que référence, vous devriez pouvoir les utiliser sans craindre de rencontrer des problèmes de compatibilité. Pour en savoir plus, consultez les ressources suivantes: