Boucles (for, foreach, while)

9 janvier, 2023

Développement Javascript Tutoriels

Table des matières Masquer

1 Javascript boucle for

2 Javascript boucle for continue

3 Javascript boucle foreach

4 Javascript boucle while

5 Conclusion

5.1 Tutoriel Javascript

Les boucles en Javascript permettent d’exécuter du code plusieurs fois de manière répétée. Elles sont utiles lorsque vous avez besoin de parcourir un tableau ou de répéter une tâche spécifique plusieurs fois. Dans ce chapitre, nous allons explorer les boucles for et while, qui sont les boucles les plus couramment utilisées en Javascript.

Javascript boucle for

La boucle for en Javascript permet d’exécuter du code un nombre déterminé de fois. Voici un exemple d’utilisation de la boucle for :

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

La boucle for est initialisée avec la variable « i » qui vaut 0. La condition « i < 5 » vérifie si « i » est inférieur à 5. Si la condition est vraie, le code à l’intérieur des accolades sera exécuté et la variable « i » sera incrémentée de 1. La boucle continuera à s’exécuter jusqu’à ce que la condition « i < 5 » soit fausse.

Le résultat de ce code sera l’affichage des nombres de 0 à 4 dans la console.

Vous pouvez également utiliser la boucle for pour parcourir un tableau :

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

for (let i = 0; i < tableau.length; i++) {
  console.log(tableau[i]);
}

La boucle for parcourt le tableau « tableau » en utilisant la propriété « length » du tableau pour déterminer le nombre d’éléments à parcourir. Pour chaque itération de la boucle, la valeur de l’élément actuel est affichée dans la console.

Vous pouvez également utiliser l’instruction « break » pour sortir prématurément d’une boucle for :

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

Javascript boucle for continue

Il existe également l’instruction « continue« , qui permet de passer à l’itération suivante de la boucle en cours sans exécuter le reste du code de l’itération actuelle. Voici un exemple d’utilisation de l’instruction « continue » avec une boucle for :

for (let i = 0; i < 10; i++) {
  if (i % 2 !== 0) {
    continue;
  }
  console.log(i);
}

Dans cet exemple, la boucle for parcourt les nombres de 0 à 9. L’instruction « continue » est incluse dans la boucle et vérifie si la valeur de « i » est impaire. Si c’est le cas, l’instruction « continue » passe à l’itération suivante de la boucle sans exécuter le reste du code de l’itération actuelle.

Le résultat de ce code sera l’affichage des nombres pairs de 0 à 8 dans la console.

Attention L'instruction "continue" ne peut être utilisée que dans les boucles, et non dans les switch.

Javascript boucle foreach

La boucle foreach en Javascript permet de parcourir les éléments d’un tableau ou d’un objet. Voici un exemple d’utilisation de la boucle foreach avec un tableau :

let tableau = ['un', 'deux', 'trois', 'quatre', 'cinq'];

tableau.forEach(function(element) {
  console.log(element);
});

La boucle foreach parcourt le tableau « tableau » et exécute la fonction anonymous passée en argument pour chaque élément du tableau. La valeur de l’élément actuel est disponible à l’intérieur de la fonction anonymous via la variable « element ».

Le résultat de ce code sera l’affichage de chaque élément du tableau dans la console.

Vous pouvez également utiliser la boucle foreach avec les objets en utilisant la méthode « Object.entries() » :

let objet = {
  un: 'valeur1',
  deux: 'valeur2',
  trois: 'valeur3'
};

Object.entries(objet).forEach(function([clé, valeur]) {
  console.log(clé + ': ' + valeur);
});

La méthode « Object.entries() » retourne un tableau d’entrées [clé, valeur] pour chaque propriété de l’objet « objet ». La boucle javascript foreach parcourt ce tableau et exécute la fonction anonymous passée en argument pour chaque entrée. Les valeurs de la clé et de la valeur sont disponibles à l’intérieur de la fonction anonymous via les variables « clé » et « valeur ».

Le résultat de ce code sera l’affichage de chaque entrée du tableau sous la forme « clé: valeur » dans la console.

Javascript boucle while

La boucle while en Javascript exécute du code tant que la condition spécifiée est vraie. Voici un exemple d’utilisation de la boucle while :

let a = 0;

while (a < 5) {
  console.log(a);
  a++;
}

La boucle while est initialisée avec la condition « a < 5 ». Tant que cette condition est vraie, le code à l’intérieur des accolades sera exécuté et la variable « a » sera incrémentée de 1. La boucle continuera à s’exécuter jusqu’à ce que la condition « a < 5 » soit fausse.

Le résultat de ce code sera l’affichage des nombres de 0 à 4 dans la console.

Vous pouvez également utiliser la boucle do-while, qui exécute d’abord le code à l’intérieur des accolades, puis vérifie la condition :

let a = 0;

do {
  console.log(a);
  a++;
} while (a < 5);

Dans ce code, la boucle do-while s’exécutera au moins une fois, car la condition est vérifiée après la première exécution du code à l’intérieur des accolades. Le résultat de ce code sera également l’affichage des nombres de 0 à 4 dans la console.

Vous devez inclure une instruction pour incrémenter ou décrémenter la variable utilisée dans la condition de la boucle while, afin d’éviter une boucle infinie. Si vous oubliez cette instruction, la condition de la boucle restera toujours vraie et la boucle continuera à s’exécuter indéfiniment.

Pour éviter cela, vous devez inclure une instruction pour incrémenter ou décrémenter la variable utilisée dans la condition de la boucle while, afin de changer la valeur de cette variable à chaque itération de la boucle. Cela permettra à la condition de devenir fausse à un moment donné, ce qui mettra fin à la boucle.

Il est également possible de mettre fin à une boucle avant que la condition ne soit fausse en utilisant l’instruction « break » . L’instruction « break » interrompt immédiatement l’exécution de la boucle et passe à la prochaine instruction après la boucle. Voici un exemple d’utilisation de l’instruction « break » avec une boucle while :

let a = 0;

while (true) {
  console.log(a);
  a++;
  if (a >= 5) {
    break;
  }
}

la boucle while est initialisée avec la condition « true », ce qui signifie qu’elle continuera à s’exécuter tant que la condition est vraie. Toutefois, l’instruction « break » est incluse à l’intérieur de la boucle et est exécutée lorsque la valeur de « a » atteint ou dépasse 5. Cela interrompt l’exécution de la boucle et passe à la prochaine instruction après la boucle.

Le résultat de ce code sera l’affichage des nombres de 0 à 4 dans la console.

break L'instruction "break" peut être utilisée non seulement dans les boucles while, mais également dans les boucles for et les switch.

Conclusion

Nous avons exploré les différentes boucles disponibles en JavaScript : la boucle for, la boucle foreach et la boucle while. Nous avons vu comment utiliser chacune de ces boucles pour exécuter du code de manière répétée, et comment utiliser des instructions de contrôle de flux telles que « break » et « continue » pour contrôler l’exécution de ces boucles.