3 choses que vous ne saviez pas sur la boucle forEach en JS

Pensez-vous savoir exactement comment fonctionne la boucle forEach en JS?

Eh bien, c’étaient mes pensées jusqu’à récemment: « juste une boucle for régulière où vous pouvez facilement utiliser break ou return ou continue« .

Aujourd’hui, je vais vous montrer 3 choses que vous ne saviez peut-être pas sur la boucle forEach.

Pensez-vous que le code ci-dessous imprimerait 1 2 puis s’arrêterait?

array = ;array.forEach(function (element) {
console.log(element);
if (element === 2) 
return;
});// Output: 1 2 3 4

Non, ce ne sera pas le cas. Si vous venez d’un milieu Java, vous vous demanderiez probablement comment est-ce possible?

La raison en est que nous transmettons une fonction de rappel dans notre fonction forEach, qui se comporte comme une fonction normale et est appliquée à chaque élément, peu importe si nous return d’un, c’est-à-dire lorsque l’élément est 2 dans notre cas.

À partir des documents officiels MDN:

Il n’y a aucun moyen d’arrêter ou de casser une boucle forEach() autrement qu’en lançant une exception. Si vous avez besoin d’un tel comportement, la méthode forEach() est le mauvais outil.

Réécrivons le code d’en haut:

const array = ;const callback = function(element) {
console.log(element);
if (element === 2) 
return; // would this make a difference? no.
}for (let i = 0; i < array.length; i++) {
callback(array);
}// Output: 1 2 3 4

L’instruction return ne fera aucune différence, car nous appliquons la fonction à chaque élément à chaque itération, donc peu importe si vous êtes sorti une fois, c’est-à-dire lorsque l’élément est 2.

Vous ne pouvez pas « casser »

Pensez-vous qu’une boucle forEach serait break dans l’exemple ci-dessous?

const array = ;array.forEach(function(element) {
console.log(element);
if (element === 2) 
break;
});// Output: Uncaught SyntaxError: Illegal break statement

Non, il ne s’exécutera même pas car l’instruction break n’est techniquement pas en boucle.

Solution ?

Utilisez simplement une boucle normale for. Personne ne se moquerait de toi.

const array = ;for (let i = 0; i < array.length; i++) {
console.log(array);
if (array === 2) 
break;
}// Output: 1 2

Vous ne pouvez pas « continuer »

Vous attendez-vous à ce que le code ci-dessous ignore l’impression de 2 sur la console et affiche uniquement 1 3 4?

const array = ;array.forEach(function (element) {
if (element === 2) 
continue;
console.log(element);
});// Output: Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement

Non, il ne s’exécutera même pas car l’instruction continue n’est pas en boucle, similaire à l’instruction break.

Solution ?

Utilisez simplement à nouveau une boucle normale for.

for (let i = 0; i < array.length; i++) {
if (array === 2) 
continue;
console.log(array);
}// Output: 1 3 4

C’était tout! J’espère que vous avez appris quelque chose de nouveau aujourd’hui.