JavaSript

Les boucles :

Une boucle est une structure conditionnelle qui permet de répéter un certain nombre de fois du code, jusqu’à ce qu’un test ne soit plus vrai.

Il existe deux principaux types de boucles :
- La boucle "for" (pour, en français) permet de répéter du code lorsque l’on sait d’avance combien de fois il faudra le répéter.
- La boucle "while" (tant que, en français) permet de répéter du code autant de fois qu’il le faut pour qu’une condition ne soit plus vraie.

La boucle "for" :

Pour introduire une boucle for, on utilise l'instruction for, suivie de parenthèse, et dans ces parenthèses, il y a trois instructions séparées par un point virgule (;).
La première instruction let compteur = 0, on défini une nouvelle variable appelée compteur, et qui est initialisé à 0.
Ensuite la deuxième instruction compteur < 5, ceci est la condition d’arrêt, la boucle continuera tant que compteur est plus petit que 5.
Puis vient la troisième et dernière instruction compteur++ à chaque tour de boucle, on fait évoluer la valeur de compteur de +1 avec l'opérateur d'incrémentation ++.

Exemple :

for (let compteur = 0; compteur < 5; compteur++) {
console.log("compteur",compteur); // affiche 0,1,2,3,4
}

Souvent, dans la programmation, on utilise la lettre i comme indice, c'est une convention de nommage pour déclarer une variable, la lettre i remplacera le mot compteur.

Exemple :

for (let i = 0; i < 5; i++) {
console.log("i",i) // affiche 0,1,2,3,4
}

La boucle "while" :

Pour introduire une boucle while, on commence par déclarer la variable i que l’on initialise à 0, ensuite, on utilise l'instruction while, suivie de parenthèse, incluant la condition d'arrêt, puis on ouvre les accolades et dans les accolades on l'incrémente de 1 i++.

Exemple :

let  i = 0;
while (i < 6) { 
i++;
console.log ("while",i); // affiche 1,2,3,4,5,6
}

Si le console.log était après la sortie d'accolade, il aurait affiché juste 6

/!\ ATTENTION /!\
Si vous oubliez d’augmenter la valeur de i, alors la condition (i < 6) sera toujours vraie, et vous aurez une boucle infinie...

De même que le placement du console.log et de l'incrementaton peut tout changer, voici un exemple :

// l'incrémentation placée après le console.log
let a = 0;
while (a < 7) { 
console.log (a); // affiche 0,1,2,3,4,5,6
a++;
}

// l'incrémentation placée avant le console.log
let b = 0;
while (b < 7) { 
b++;
console.log (b); // affiche 1,2,3,4,5,6,7
}

Parcourir un tableau avec les boucles :

L'Utilisation d'une boucle est très utile pour parcourir un tableau, voici un exempe :

// On déclare le tableau
let fruits =["Banane","Fraise","Cerise","Framboise","Melon"]
               
for (let i = 0; i < fruits.length; i++){ 
// la propriété "length" renvoie le nombre d"élémént dans le tableau
console.log("fruits =>", fruits[i]);
}
// affiche
// fruits => Banane
// fruits => Fraise
// fruits => Cerise
// fruits => Framboise
// fruits => Melon

/!\ ATTENTION /!\
Si on ne met pas le [i] dans le console.log, il nous bouclera le tableau entier au lieu de chaque élément, et ce autant de fois que de nombres d'éléments.

Voici un nouveau tableau avec divers éléments inclus dans des objets :

const products = [
{
    id: 1,
    nom: "kiwi",
    prix: 2,
    disponible: true,
    categorie: { idCategorie: 1, nomCategorie: "Fruits" }
},
{
    id: 2,
    nom: "café",
    prix: 6,
    disponible: true,
    categorie: { idCategorie: 2, nomCategorie: "boissons" }
},
{
    id: 3,
    nom: "Cerise",
    prix: 5,
    disponible: true,
    categorie: { idCategorie: 1, nomCategorie: "Fruits" }
},
{
    id: 4,
    nom: "Aubergine",
    prix: 4,
    disponible: false,
    categorie: { idCategorie: 1, nomCategorie: "légumes" }
},
{
    id: 5,
    nom: "thé",
    prix: 3,
    disponible: false,
    categorie: { idCategorie: 2, nomCategorie: "boissons" }
},
{
    id: 6,
    nom: "poivron",
    prix: 4,
    disponible: true,
    categorie: { idCategorie: 3, nomCategorie: "légumes" }
}
];

Avec ce tableau, on va devoir afficher toutes les valeurs des nom de la liste ainsi que leurs valeurs de nomCatégorie avec la boucle for.

for (let i = 0; i < products.length; i++) {
console.log("nom + catégorie =>", products[i].nom, products[i].categorie.nomCategorie);
} 

// affiche
// nom + catégorie => kiwi Fruits
// nom + catégorie => café boissons
// nom + catégorie => Cerise Fruits
// nom + catégorie => Aubergine légumes
// nom + catégorie => thé boissons
// nom + catégorie => poivron légumes

Il existe une méthode comme la méthode "console.log", mais conçu spécifiquement pour parcourir les tableaux, cette méthode se nomme "forEach" (pour chaque, en français), voici comment elle fonctionne.

On commence par indiquer le nom du tableau, ensuite on indique qu'on va utiliser la méthode ".forEach()", qui permet d'indiquer que chaque entrée constituant le tableau doit être accédée séparément, puis on lui indique que c'est une fonction et on lui donne un nom, voici un exemple :

products.forEach(function (nomDonné) {
console.log("forEach", nomDonné.nom) //contiennent le code à exécuter à chaque itération de la boucle
});

// affiche
// forEach kiwi 
// forEach café 
// forEach Cerise 
// forEach Aubergine 
// forEach thé 
// forEach poivron

La même fonction avec une deuxième valeur en plus.

products.forEach(function (nomDonné) {
//contiennent le code à exécuter à chaque itération de la boucle
console.log("forEach", nomDonné.nom, nomDonné.disponible) 
});

// affiche
// forEach kiwi true
// forEach café true
// forEach Cerise true
// forEach Aubergine false
// forEach thé false
// forEach poivron true

Les boucles :

~~ Fin ~~

Fin