Boucles sur les tableaux en

À propos de Boucles sur les tableaux

Quand on travaille avec des tableaux, on veut parfois exécuter du code pour chaque valeur du tableau. C'est ce qu'on appelle itérer sur le tableau, ou le parcourir.

Nous allons ici nous intéresser au cas où on ne souhaite pas modifier le tableau au passage. Pour transformer des tableaux, voir plutôt le concept Transformations de tableaux.

La boucle for

La façon la plus basique, et généralement très performante, d'itérer sur un tableau est d'utiliser une boucle for, voir le concept Boucles for.

const numbers = [6.0221515, 10, 23];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// => 6.0221515
// => 10
// => 23

La boucle for...of

Quand on veut travailler directement avec la valeur à chaque itération, sans avoir besoin de l'indice, on peut utiliser une boucle for...of.

for...of fonctionne comme la boucle for de base montrée ci-dessus, mais au lieu d'avoir à manipuler l'indice comme variable de la boucle, on obtient directement la valeur.

const numbers = [6.0221515, 10, 23];

// Because re-assigning number inside the loop will be very
// confusing, disallowing that via const is preferable.
for (const number of numbers) {
  console.log(number);
}
// => 6.0221515
// => 10
// => 23

Comme dans les boucles for classiques, on peut utiliser continue pour arrêter l'itération en cours et break pour arrêter complètement l'exécution de la boucle.

JavaScript dispose aussi d'une boucle for...in pour itérer sur les clés d'un objet. Il est important de noter que for...of et for...in ne sont pas interchangeables ; voir la documentation MDN pour plus de détails.

La méthode forEach

Chaque tableau possède une méthode forEach qui peut aussi servir à parcourir les éléments du tableau.

forEach prend un callback en paramètre. Le callback est appelé une fois pour chaque élément du tableau.

const numbers = [6.0221515, 10, 23];

numbers.forEach((number) => console.log(number));
// => 6.0221515
// => 10
// => 23

Dans l'exemple ci-dessus, le callback n'utilise que l'élément courant comme paramètre. Au besoin, le callback peut accepter jusqu'à trois paramètres.

• la valeur de l'itération en cours
• l'indice de l'itération en cours
• le tableau tout entier

const numbers = [6.0221515, 10, 23];

function callback(number, index, fullArray) {
  console.log(number, index, fullArray);
}

numbers.forEach(callback);
// => 6.0221515 0 [ 6.0221515, 10, 23 ]
// => 10 1 [ 6.0221515, 10, 23 ]
// => 23 2 [ 6.0221515, 10, 23 ]

En plus du callback, forEach accepte en second paramètre optionnel le contexte this à utiliser pour l'itération. Un exemple est disponible dans la section « Using thisArg » de MDN.

Voici quelques points à garder en tête quand on utilise forEach.

• Il n'y a aucun moyen d'arrêter l'itération une fois que la boucle forEach a commencé. Les instructions break et continue n'existent pas dans ce contexte.
• forEach se comporte étrangement si on modifie le tableau après le début de la boucle. Les éléments ajoutés à la fin sont ignorés, en supprimer peut conduire à en sauter d'autres, etc. Pour éviter ce genre de problèmes, il ne faut jamais modifier le tableau sous-jacent dans le callback.
• La valeur de retour de la méthode forEach elle-même est undefined. Pour cette raison, on ne peut pas enchaîner d'autres méthodes de tableau à sa suite.
• Si tu cherches à optimiser les performances de ton code, tu devrais envisager d'utiliser for ou for...of à la place : les deux sont environ trois fois plus rapides.