Les Boucles

Comme en Java, JS intègre les instructions itératives for et while. Comme dans tous les langages modernes, JS offre aussi une gamme plus étendue de boucles.

Boucle for

Elle fonctionne comme en Java.

Itération sur les 3 éléments d'un array avec for

const person = ["John", "Doe", 25];
   for (let i = 0; i < person.length; i++) {
    console.log(person[i]);
}

important

Si vous voulez utiliser le projet créé avec vite et il faut

• créer un fichier boucles.js dans le répertoire src
• transformer le code pour en faire une fonction qui est exportée

export function testBoucles(element) {
  const person = ["John", "Doe", 25];
  for (let i = 0; i < person.length; i++) {
      console.log(person[i]);
  }
}

• dans le main.js il faut ajouter import { testBoucles } from './boucles.js'
• puis appeler la fonction quand vous le voulez testBoucles();

danger

dans tous les autres tutoriels j'ai choisi d'écrire avec la syntaxe la plus légère. Je fais donc comme si je n'utilisais pas un projet créé avec vite. Mais si vous avez compris le code juste au dessus, vous avez simplement besoin d'exporter chaque nouvelle fonction.

Boucle while

Elle fonctionne comme en Java.

Itération indéterministe

let randomNumber;
let foundOdd = false;

while (!foundOdd) {
  randomNumber = Math.floor(Math.random() * 100) + 1;
  console.log(`Nombre aléatoire : ${randomNumber}`);
  if (randomNumber % 2 !== 0) {
    console.log('Nombre impair trouvé');
    foundOdd = true;
  }
}

Boucle for...of

En JavaScript, la boucle for...of est une structure itérative utilisée pour parcourir les éléments énumérables.

Itération sur les 3 éléments d'un array avec for .. of

const person = ["John", "Doe", 25];
   for (let x of person) {
    console.log(x);
 }

astuce

Le choix entre l'itération sur les indices (utiliser une boucle for classique) ou utiliser for...of dépend du contexte et des besoins spécifiques de votre code. Les deux approches ont leurs avantages et inconvénients, et le choix dépend souvent de la lisibilité du code et de l'utilisation des fonctionnalités spécifiques de chaque méthode. S'il n'y a pas besoin d'avoir accès à l'indice, on préfèrera utilser for...of.

Boucler en mode "Callback"

Itération sur les 3 éléments d'un array à l'aide d'une fonction callBack

const persons = ["John", "Doe", 25];
persons.forEach(function(person, index, tab) {
  console.log(`Index ${index}, value ${person}, array ${tab}`)
});

astuce

Encore une fois, itérer avec forEach plutôt qu'avec for...of ou for dépend du contexte et des préférences stylistiques de la personne qui développe. Itérer via une fonction callback est très courant en javascript. Il faut vous habituer à cette syntaxe.

Dans ce cours, je vais généralement (mais pas systématiquement)

• itérer de préférence avec for...of
• sauf si la structure de données est de taille fixe et/ou que j'ai besoin de l'indice. Dans ce cas j'utilise généralement for
• sauf si on itère sur des éléments du DOM, où je préfère itérer avec forEach (tutoriel suivant)

cells.forEach(function (cell) {
  cell.addEventListener('click', function () {
    if (game === 1) {
      playFill(cell);
    } else if (game === 2) {
      playCrush(cell);
    }
  });
});

• parfois je vais aussi itérer sur une paire clef/valeur (mais nous verrons ça dans le tutoriel sur les collections)

astuce

Dans le cadre de ce cours il est important de tester tous les styles d'itérations.

et pour terminer la boucle for...in

Cette boucle est spécialement conçue pour itérer à travers les propriétés d'un objet. Elle offre une manière concise d'itérer sur les clés d'un objet.

Itération sur les 3 attributs d'un objet

let oldCar = {
 make: 'Toyota',
 model: 'Tercel',
 year: '1996'
};

for (let key in oldCar) {
 console.log(`${key} --> ${oldCar[key]}`);
}

Cette forme d'itération fonctionne aussi très bien sur les tableaux.

Itération sur les 3 éléments d'un tableau

let values = ['a', 'b', 'c'];

for (let key in values) {
 console.log(`${key} --> ${values[key]}`);
}

Exercices

Travail à faire

Copiez-collez ce code dans un fichier html, lancez un live serveur avec VSCODE et testez / débuggez à l'aide de votre navigateur.

//Exercice 1
//en utilisant for .. of affichez tous le fruits
const fruits = ["Apple", "Banana", "Pineapple", "Orange", "Grapes"];            

//Exercice 2
// en utilisant un forEach + une fonction callback affichez tous les fruits


//Exercice 3
//boucler pour afficher uniquement le nom de fruits au gout sucré
const fruit1 = [
    {"Name" :"Apple", "taste" : "sweety", "calorie" : 30},
    {"Name" :"Tomato", "taste" : "salty", "calorie" : 10},
    {"Name" :"Mango", "taste" : "sweety", "calorie" : 10}
    ];

//Exercice 4
//Corriger ce code
const numbers = [1, 2, "3", 4, 5];
let sum = 0;
for (let i = 0; i <= numbers.length; i++) {
    sum += numbers[i];
}
console.log("La somme des nombres est : ${sum}");

const chiffreATrouver = 3; 
let i=0;
let trouve = false;
while (i < numbers.length && !trouve){
    trouve = chiffreATrouver == numbers[i];
    i++;
}
console.log(`Résultat de la boucle : ${trouve}`);