JavaScript - Boucle for...of

Bienvenue, futurs programmeurs ! Aujourd'hui, nous allons plonger dans une des fonctionnalités les plus utiles de JavaScript : la boucle for...of. En tant que votre professeur de sciences informatiques bienveillant, je suis excité de vous guider dans cette aventure. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et partons ensemble dans cette aventure de programmation !

Qu'est-ce que la boucle for...of ?

Avant de rentrer dans les détails, comprenons ce qu'est la boucle for...of. Imaginez que vous avez un panier rempli de fruits colorés et que vous voulez les examiner un par un. La boucle for...of est comme votre assistant utile qui prend chaque fruit du panier et le vous tend, un par un, jusqu'à ce que le panier soit vide.

En termes de programmation, la boucle for...of nous permet d'itérer (mot fancy pour dire "passer par") sur des objets itérables comme les tableaux, les chaînes de caractères et d'autres structures de données que nous étudierons plus tard.

Syntaxe

Voyons maintenant comment nous écrivons une boucle for...of. Ne vous inquiétez pas si cela paraît un peu étrange au départ - nous allons le décortiquer ensemble !

for (variable of iterable) {
// code à exécuter
}

Voici ce que cela signifie :

• for : Ce mot-clé indique à JavaScript que nous démarons une boucle.
• variable : C'est ici que nous stockerons chaque élément que nous parcourons dans l'itérable.
• of : Ce mot-clé rend cette boucle une boucle for...of.
• iterable : C'est l'objet que nous parcourons (comme notre panier de fruits).
• Le code à l'intérieur des accolades {} est ce que nous voulons faire avec chaque élément.

Exemples

Exemple 1 : Parcourir un tableau

Commençons par un exemple simple. Nous allons créer un tableau de fruits et en afficher chacun.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
console.log(fruit);
}

Si vous exécutez ce code, vous verrez :

apple
banana
cherry
date

Que se passe-t-il ici ? Notre boucle for...of prend chaque fruit du tableau fruits et le stocke dans la variable fruit. Ensuite, nous utilisons console.log() pour afficher chaque fruit.

Exemple 2 : Parcourir une chaîne de caractères

Savez-vous que les chaînes de caractères sont également itérables ? Commençons par épeler un mot :

let word = 'Hello';

for (let letter of word) {
console.log(letter);
}

Cela affichera :

H
e
l
l
o

Chaque caractère de la chaîne est traité comme un élément individuel que nous pouvons parcourir. Génial, non ?

Exemple 3 : Utiliser for...of avec des nombres

Maintenant, passons à quelque chose de plus pratique. Imaginez que vous êtes un enseignant (comme moi !) et que vous voulez calculer la moyenne des notes pour une classe :

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
total += score;
count++;
}

let average = total / count;
console.log(`La moyenne de la classe est ${average}`);

Ce script calculera et affichera la moyenne des notes. Nous utilisons la boucle for...of pour additionner toutes les notes et compter combien il y en a.

Exemple 4 : Sortir d'une boucle

Parfois, vous pourriez vouloir arrêter la boucle avant qu'elle ne se termine. Nous pouvons le faire avec le mot-clé break. Imaginons que nous cherchons un fruit spécifique :

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`Trouvé ${searchFor} !`);
break;
}
console.log(`Vérification ${fruit}...`);
}

Ce script s'arrêtera dès qu'il trouvera 'cherry', sans vérifier les autres fruits.

Exemple 5 :忽略项目使用 continue

Que faire si nous voulons ignorer certains éléments ? Nous pouvons utiliser le mot-clé continue. Reprenons l'exemple des fruits et n'affichons que ceux qui commencent par 'a' :

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
if (!fruit.startsWith('a')) {
continue;
}
console.log(fruit);
}

Cela n'affichera que 'apple', 'apricot' et 'avocado'.

Tableau des méthodes

Voici un tableau pratique des méthodes que nous avons utilisées dans nos exemples :

Méthode	Description	Exemple
console.log()	Affiche une sortie dans la console	console.log('Hello, World!')
startsWith()	Vérifie si une chaîne commence par des caractères spécifiés	'apple'.startsWith('a') // true
break	Sort d'une boucle	if (condition) break;
continue	Passe à l'itération suivante d'une boucle	if (condition) continue;

Conclusion

Et voilà, les amis ! Nous avons parcouru le pays des boucles for...of, des tableaux simples aux chaînes de caractères, et avons même appris à sortir ou ignorer des éléments. Souvenez-vous, la pratique rend parfait, alors n'ayez pas peur d'expérimenter avec ces concepts.

Dans mes années d'enseignement, j'ai découvert que la meilleure façon d'apprendre est par la pratique. Alors, voici un petit devoir pour vous : essayez de créer vos propres boucles for...of avec différents types de données. Peut-être avec vos films préférés, ou les noms de vos amis. Les possibilities sont infinies !

Bonne programmation, et souvenez-vous - dans le monde de la programmation, chaque boucle est une opportunité pour la découverte !

Credits: Image by storyset