Cours IT Bases JavaScript 042_Boucles while, for

Les instructions de boucle sont des méthodes pour exécuter de manière répétée un bloc de code. JavaScript fournit différents types d’instructions de boucle comme while, do-while, for, etc. Un corps de boucle complet comprend : expression d’initialisation, condition de boucle et itérateur.

Boucle `while`

La boucle while est utilisée pour exécuter de manière répétée un segment de code tant que la condition est true. L’exécution unique du corps de la boucle est appelée une itération. Toute expression ou variable peut être une condition de boucle, la condition de boucle est évaluée et le résultat est converti en valeur booléenne. Comme pour if, si le corps de la boucle n’a qu’une seule instruction, les accolades {…} peuvent également être omises, mais cela n’est pas recommandé. Avant chaque itération, la condition est vérifiée.

Exemple :

1
let i = 0; // Expression d'initialisation, généralement utilisée pour déclarer la variable compteur, en son absence undefined sera signalé
2
while (i < 5) { // Condition de boucle, si `true`, la boucle continuera à s'exécuter
3
  console.log(i);
4
  i++; // Itérateur, généralement utilisé pour mettre à jour la variable compteur et correspondre à la condition de boucle
5
}

Exemple de boucle infinie :

1
let i = 0;
2
  while (1) { // La condition est toujours true, entrera en boucle infinie
3
    console.log(i);
4
    i++; // S'applique généralement à cette forme de mise à jour du compteur pour la condition de boucle
5
    if (i >= 5) break;  // Commentez ceci pour entrer en mode boucle infinie
6
}

Boucle `do-while`

La boucle do-while est similaire à la boucle while, mais elle exécute d’abord le corps de la boucle une fois, puis vérifie si la condition est true. Si la condition est vraie, elle continue à exécuter le corps de la boucle. Notez les scénarios d’utilisation : n’utilisez do-while que lorsque vous devez exécuter au moins une fois le corps de la boucle, que la condition soit vraie ou non. Pour les autres scénarios, la boucle while est recommandée. Après chaque itération, la condition est vérifiée.

Exemple :

1
let i = 0;
2
do {
3
  console.log(i);
4
  i++;
5
} while (i < 5);

Boucle `for`

La boucle for est une structure de boucle plus complexe mais aussi la plus couramment appliquée, utilisée pour exécuter de manière répétée un segment de code. La boucle for comprend trois parties : expression d’initialisation, condition de boucle et itérateur. Voici la syntaxe de base de la boucle for : Avant chaque itération, la condition est vérifiée, d’autres paramètres peuvent être utilisés.

Exemple :

1
for (let i = 0; i < 5; i++) {
2
  console.log(i);
3
}

Exemple de boucle infinie :

1
let i = 0;
2
  for ( ; ; ) { // Lorsque toutes les conditions sont omises, entrera en boucle infinie
3
    console.log(i);
4
    i++; // S'applique généralement à cette forme de mise à jour du compteur pour la condition de boucle
5
  if (i >= 5) break;  // Commentez ceci pour entrer en mode boucle infinie
6
}

Omettre des segments d’instructions

Dans la boucle for, l’expression d’initialisation, la condition de boucle ou l’itérateur peuvent être omis, un ou plusieurs, mais les points-virgules ; doivent être conservés. Les points-virgules sont utilisés pour séparer chaque partie, lors de l’omission d’une partie, le point-virgule correspondant doit toujours être conservé.

Exemple :

1
let x = 0;
2
for (; x < 5; x++) {
3
  console.log(x);
4
}
5
// L'expression d'initialisation est omise et déplacée à l'extérieur de la boucle, la boucle reste valide
6

7
let y = 0;
8
for (;; y++) {
9
  if (y >= 5) {
10
    break;
11
  }
12
  console.log(y);
13
}
14
// La condition de boucle est omise, la boucle est terminée par l'instruction `if` et `break`
15

16
let z = 0;
17
for (; z < 5;) {
18
  console.log(z);
19
  z++;
20
}
21
// L'itérateur est omis et déplacé dans le corps de la boucle, la boucle reste valide

Boucles imbriquées

Les boucles imbriquées signifient qu’à l’intérieur d’un corps de boucle, une autre structure de boucle complète est contenue. Chaque fois que la boucle externe s’exécute, la boucle interne s’exécute complètement une fois.

Exemple de triangle rectangle :

1
// Exemple A
2
for (let i = 1; i <= 5; i++) { // Boucle externe, contrôle le nombre de lignes, de 1 à 5.
3
  let row = ''; // Chaque fois que la boucle externe s'exécute, une chaîne vide `row` est créée pour stocker les étoiles de la ligne actuelle.
4
  for (let j = 1; j <= i; j++) { // Boucle interne, contrôle le nombre d'étoiles par ligne, de 1 au numéro de ligne actuel `i`.
5
    row += '⭐ '; // Ajoute l'étoile à `row`, formant la chaîne d'étoiles de la ligne actuelle.
6
  }
7
  console.log(row); // Affiche la chaîne d'étoiles de la ligne actuelle.
8
}

1
// Exemple B
2
for (let i = 1; i <= 5; i++) { // Boucle externe représente le nombre de lignes
3
    for (let j = 1; j <= i; j++) { // Boucle interne représente les colonnes
4
        document.write('⭐'); // Utilise l'étoile comme élément graphique
5
    }
6
    document.write('</br>'); // Saut de ligne
7
}

Exemple de triangle inversé :

1
// Exemple A
2
for (let i = 5; i >= 1; i--) { // Boucle externe, contrôle le nombre de lignes, de 1 à 5.
3
  let row = ''; // Chaque fois que la boucle externe s'exécute, une chaîne vide `row` est créée pour stocker les étoiles de la ligne actuelle.
4
  for (let j = 1; j <= i; j++) { // Boucle interne, contrôle le nombre d'étoiles par ligne, de 1 au numéro de ligne actuel `i`.
5
    row += '* ';  // Ajoute l'étoile à `row`, formant la chaîne d'étoiles de la ligne actuelle.
6
  }
7
  console.log(row);  // Affiche la chaîne d'étoiles de la ligne actuelle.
8
}

1
// Exemple B
2
for (let i = 1; i <= 5; i++) { // Boucle externe représente le nombre de lignes
3
    for (let j = 0; j <= 5 - i; j++) { // Boucle interne représente les colonnes
4
        document.write('⭐'); // Utilise l'étoile comme élément graphique
5
    }
6
    document.write('</br>'); // Saut de ligne
7
}

`break` termine (arrête, quitte) la boucle

break est utilisé pour terminer (arrêter, quitter) la boucle actuelle ou l’instruction switch. S’il n’y a pas de break, elle continuera à exécuter les case suivants (c’est-à-dire qu’un phénomène de “pénétration” se produit).

La combinaison “boucle infinie + break” est adaptée aux situations où il n’est pas nécessaire de vérifier la condition au début/fin de la boucle, mais où il faut vérifier la condition au milieu ou même à plusieurs positions du corps.

Exemple :

1
let count = 0;
2
while (true) {
3
  console.log("Dans la boucle...");
4
  // Simule une condition, lorsqu'elle est remplie quitte la boucle
5
  if (count === 5) {
6
    console.log("Condition remplie, sortie de la boucle");
7
    break;
8
  }
9
  count++;
10
}

`continue` continue à l’itération suivante (saute l’actuelle)

continue est utilisé pour terminer prématurément l’itération actuelle dans une boucle et continuer à l’itération suivante. continue est la “version allégée” de break. Il n’arrête pas toute la boucle, mais arrête seulement cette itération actuelle et force le démarrage d’une nouvelle itération (si la condition le permet).

Exemple :

1
for (let i = 0; i < 8; i++) {
2
    if (i % 2 === 0) {
3
        continue; // Lorsque i modulo 2 est égal à 0, saute l'itération actuelle et continue à l'itération suivante
4
    }
5
    console.log(i);
6
}

Boucle while

Boucle do-while

Boucle for

Omettre des segments d’instructions

Boucles imbriquées

break termine (arrête, quitte) la boucle

continue continue à l’itération suivante (saute l’actuelle)

Commentaires

Boucle `while`

Boucle `do-while`

Boucle `for`

`break` termine (arrête, quitte) la boucle

`continue` continue à l’itération suivante (saute l’actuelle)