La Boucle For…Of en JavaScript : Une Itération Simple et Efficace

En JavaScript, il existe plusieurs méthodes pour parcourir des tableaux et d’autres objets itérables. L’une de ces méthodes est la boucle For…Of. Dans cet article, nous allons apprendre à utiliser la boucle For…Of en JavaScript et à comprendre dans quels cas elle est préférable.

Qu’est-ce que la Boucle For…Of ?

La boucle For…Of est une structure utilisée pour parcourir un tableau ou d’autres objets itérables. Cette boucle visite chaque élément du tableau et effectue une opération spécifiée pour chacun. La boucle For…Of ne sert pas à accéder aux indices ou aux propriétés du tableau, mais uniquement aux éléments eux-mêmes.

Utilisation de la Boucle For…Of

La boucle For…Of s’utilise comme suit :

const couleurs = ['rouge', 'vert', 'bleu'];

for (const couleur of couleurs) {
  console.log(couleur);
}

Dans le code ci-dessus, nous avons créé un tableau appelé couleurs et utilisé la boucle For…Of pour afficher chaque couleur à l’aide de console.log().

For…Of avec les Tableaux

La boucle For…Of est très efficace lorsqu’elle est utilisée avec des tableaux, notamment lorsque vous souhaitez effectuer une opération sur chaque élément du tableau.

const nombres = [1, 2, 3, 4, 5];
let somme = 0;

for (const nombre of nombres) {
  somme += nombre;
}

console.log('Somme :', somme);

Dans le code ci-dessus, nous avons créé un tableau appelé nombres et calculé la somme de tous ses éléments. La boucle For…Of parcourt chaque élément du tableau et les ajoute à la variable somme.

For…Of avec les Chaînes de Caractères

La boucle For…Of peut également être utilisée avec les chaînes de caractères. Si vous souhaitez parcourir une chaîne, vous pouvez utiliser la boucle For…Of pour accéder à chaque caractère.

const str = 'Bonjour';

for (const char of str) {
  console.log(char);
}

Dans le code ci-dessus, nous avons créé une chaîne appelée str et affiché chaque caractère dans la console.

For…Of avec d’autres Objets Itérables comme Map, Set et NodeList

La boucle For…Of ne se limite pas aux tableaux ; elle peut également être utilisée avec d’autres objets itérables tels que Map, Set et NodeList. Vous pouvez utiliser la boucle For…Of pour visiter chaque élément de ces objets.

const ensemble = new Set([1, 2, 3]);

for (const element of ensemble) {
  console.log(element);
}

Dans le code ci-dessus, nous avons créé un Set et affiché chacun de ses éléments dans la console.

Conclusion

La boucle For…Of offre un moyen simple et efficace de parcourir des objets itérables en JavaScript. Elle peut être utilisée avec des tableaux, des chaînes de caractères, des Map, des Set et d’autres objets itérables. Alors que la boucle For…Of est utilisée pour accéder aux éléments d’un tableau, la boucle For…In est privilégiée lorsque vous devez accéder aux indices d’un tableau.