3 ting du ikke vidste om forEach loop i JS

tror du, du ved præcis, hvordan forEach sløjfen fungerer i JS?

nå, det var mine tanker indtil for nylig: “bare en almindelig for loop, hvor du nemt kan bruge break eller returneller continue“.

i dag vil jeg vise dig 3 ting, som du måske ikke har kendt til forEach sløjfen.

tror du, at koden nedenfor ville udskrive 1 2 og derefter stoppe?

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

Nej, det vil det ikke. hvis du kommer fra en Java-baggrund, vil du sandsynligvis spørge dig selv, hvordan er det muligt?

årsagen er, at vi sender en tilbagekaldsfunktion i vores forEach funktion, som opfører sig som en normal funktion og anvendes på hvert element, uanset om vi return fra en, dvs.når elementet er 2 i vores tilfælde.

fra de officielle MDN-dokumenter:

der er ingen måde at stoppe eller bryde en forEach() loop andet end ved at kaste en undtagelse. Hvis du har brug for en sådan adfærd, er forEach() – metoden det forkerte værktøj.

lad os omskrive koden ovenfra:

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

return – udsagnet vil ikke gøre nogen forskel, da vi anvender funktionen på hvert element ved hver iteration, derfor er det ligeglad med, om du forlod en gang, dvs.når elementet er 2.

du kan ikke ‘bryde’

tror du enforEach loop ville break i eksemplet nedenfor?

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

Nej, det vil ikke engang køre, fordi break instruktionen ikke er teknisk i en loop.

løsning?

brug bare en normal for loop. Ingen ville grine af dig.

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

du kan ikke ‘fortsætte’

forventer du, at koden nedenfor springer udskrivning 2 til konsollen og kun viser 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

Nej, det kører ikke engang, fordi continue instruktionen ikke er i en løkke, svarende til break instruktionen.

løsning?

brug bare en normal for loop igen.

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

det var det! Håber du har lært noget nyt i dag.