3 dingen die je niet weet over de forEach lus in JS

denkt u dat u precies weet hoe de forEach loop werkt in JS?

Nou, Dit waren mijn gedachten tot voor kort: “gewoon een regelmatige for lus waar je gemakkelijk break of return of continuekunt gebruiken”.

vandaag laat ik je 3 dingen zien die je misschien niet wist over de lus forEach.

denkt u dat de onderstaande code 1 2 zou afdrukken en dan zou stoppen?

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

Nee, dat zal het niet. als u van een Java achtergrond komt, zou u zich waarschijnlijk afvragen hoe dat mogelijk is?

de reden is dat we een callback-functie doorgeven in onze forEach – functie, die zich net als een normale functie gedraagt en op elk element wordt toegepast, ongeacht of we return van één element hebben, d.w.z. wanneer element 2 is in ons geval.

van de officiële MDN-documenten:

er is geen andere manier om een forEach() lus te stoppen of te breken dan door een uitzondering te gooien. Als je dergelijk gedrag nodig hebt, is de forEach() methode het verkeerde gereedschap.

laten we de code van boven herschrijven:

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

het returnstatement zal geen verschil maken, omdat we de functie toepassen op elk element bij elke iteratie, dus het maakt niet uit als je eenmaal gestopt, dat wil zeggen wanneer element 2 is.

u kunt

niet ‘breken’denk je dat een forEach lus break in het onderstaande voorbeeld zou zijn?

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

Nee, Het zal niet eens draaien omdat de break instructie technisch niet in een lus zit.

oplossing?

gebruik gewoon een normale for lus. Niemand lacht je uit.

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

u kunt niet’doorgaan’

verwacht u dat de onderstaande code het afdrukken 2 overslaat naar de console en alleen 1 3 4 laat zien ?

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

Nee, Het zal niet eens draaien omdat de continue instructie zich niet in een lus bevindt, vergelijkbaar met de break instructie.

oplossing?

gebruik gewoon opnieuw een normale for lus.

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

dat was het! Ik hoop dat je vandaag iets nieuws hebt geleerd.