Boucles

4

Les boucles 🔁 nous permettent de rĂ©pĂ©ter une action plusieurs fois.

Par exemple, pour Ă©crire dans la console les chiffres 2, 4, 6, 8 il est possible d'Ă©crire chaque ligne Ă  la main ✍ comme suit:

console.log(2);
console.log(4);
console.log(6);
console.log(8);

ou d'utiliser une boucle:

for (let index = 2; index < 9; index += 2) {
  console.log(index);
}

// 2
// 4
// 6
// 8

for

La boucle dans l'exemple prĂ©cĂ©dent est appelĂ©e boucle for(). Voici ce qui constitue son anatomie.

  • for dĂ©clare la boucle.
  • let index = 2 initialise une variable servant de compteur. (cette variable n'est initialisĂ©e qu'une seule fois)
  • index < 9 cette condition est validĂ©e au dĂ©but de chaque itĂ©ration de la boucle. Si elle retourne vraie, la boucle se rĂ©pĂšte.
  • index += 2 mise Ă  jour de la variable servant de compteur. (EffectuĂ© avant la validation de la condition).

Voir le CodePen de Simon Arnold (@smnarnold).

For & Tableau

La boucle for() peut ĂȘtre utilisĂ©e pour boucler sur les Ă©lĂ©ments d'un tableau:

const employesList = ["Pam", "Jim", "Dwight"];

for (let index = 0; index < employesList.length; index++) {
  const qui = employesList[index];
  console.log(qui);
}

// Pam
// Jim
// Dwight

Dans cet exemple, la condition stipule de rĂ©pĂ©ter la boucle tant que la variable index, servant de compteur, est infĂ©rieure au nombre d'Ă©lĂ©ments contenus dans le tableau employesList.length, soit: 3.

Puisque la variable index est incrĂ©mentĂ©e par la boucle Ă  chaque itĂ©ration, chaque Ă©lĂ©ment du tableau est accessible par sa position entre crochets employesList[index].

For & Index

Pour obtenir l'index de chaque Ă©lĂ©ments dans une boucle for(), il suffit de faire rĂ©fĂ©rence Ă  la variable dĂ©fini dans la boucle en soit.

Par exemple:

const employesList = ["Pam", "Jim", "Dwight"];

for (let index = 0; index < employesList.length; index++) {
  const qui = employesList[index];
  console.log(qui, index); // 👈 index ici
}

// Pam, 0
// Jim, 1
// Dwight, 2

For & NodeList

Une boucle for() est aussi ĂȘtre utile pour itĂ©rer sur les Ă©lĂ©ments retournĂ©s par un querySelectorAll (NodeList), comme dans l'exemple suivant:

const elements = document.querySelectorAll('.element');

for (let index = 0; index < elements.length; i++) {
  const element = elements[index];
  console.log(element);
}

SĂ©lectionner les attaquants du Canadien 🏒 codepen.io/smnarnold/pen/qBBBmwW

Pour en savoir plus, voir cet article MDN🩖 portant sur for()

forEach

La boucle forEach() permet de simplifier une boucle si tous les Ă©lĂ©ments doivent-ĂȘtre accĂ©dĂ©s. Il est donc possible de refaire les boucles for() prĂ©cĂ©dentes ainsi:

const employesList = ["Pam", "Jim", "Dwight"];

employesList.forEach(qui => {
  console.log(qui);
});

// Pam
// Jim
// Dwight
  • employesList tableau sur lequel l'itĂ©ration doit avoir lieu.
  • forEach dĂ©clare que chaque Ă©lĂ©ment du tableau doit-ĂȘtre accĂ©dĂ©.
  • employe => { ... } dĂ©clare une fonction et un nom en paramĂštre (employe) correspondant Ă  l'item courant dans la boucle (ce nom est arbitraire).

forEach & Index

Si dĂ©sirĂ©, il est possible de spĂ©cifier un deuxiĂšme paramĂštre dans une boucle forEach(). Ce deuxiĂšme paramĂštre correspond Ă  l'index courant dans la boucle.

Par exemple:

const employesList = ["Pam", "Jim", "Dwight"];

employesList.forEach((qui, index) => {
  console.log(qui, index);
});

// Pam, 0
// Jim, 1
// Dwight, 2

forEach & NodeList

Une boucle forEach() est aussi ĂȘtre utile pour itĂ©rer sur les Ă©lĂ©ments retournĂ©s par un querySelectorAll (NodeList), comme dans l'exemple suivant:

const elements = document.querySelectorAll('.element');

elements.forEach(element => {
  console.log(element)
});

Attrapez tous les Pokémons! codepen.io/smnarnold/pen/jOOOQvd

Pour en savoir plus, voir cet article MDN🩖 portant sur forEach()

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagĂ© ton opinion 😎
Pssst, c'est 💯 anonyme