3 Saker du inte visste om forEach loop i JS

tror du att du vet exakt hur forEach – slingan fungerar i JS?

Tja, det var mina tankar tills nyligen:”bara en vanligfor slinga där du enkelt kan använda break eller return eller continue”.

idag ska jag visa dig 3 saker som du kanske inte visste om forEach – slingan.

tror du att koden nedan skulle skriva ut 1 2 och sedan sluta?

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

Nej, det kommer inte. Om du kommer från en Java-bakgrund, skulle du förmodligen fråga dig själv hur är det möjligt?

anledningen är att vi passerar en återuppringning funktion i vår forEach funktion, som beter sig precis som en normal funktion och tillämpas på varje element oavsett om vi return från en dvs när elementet är 2 i vårt fall.

från de officiella MDN-dokumenten:

det finns inget sätt att stoppa eller bryta en forEach() loop annat än genom att kasta ett undantag. Om du behöver sådant beteende är metoden forEach() fel verktyg.

låt oss skriva om koden ovanifrån:

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 – uttalandet kommer inte att göra någon skillnad, eftersom vi tillämpar funktionen på varje element vid varje iteration, så det bryr sig inte om du lämnade en gång, dvs när elementet är 2.

du kan inte ’bryta’

tror du att en forEach loop skulle break i exemplet nedan?

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

Nej, det kommer inte ens att köras eftersom break – instruktionen inte är tekniskt i en slinga.

lösning?

använd bara en normal for slinga. Ingen skulle skratta åt dig.

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

du kan inte ’fortsätta’

förväntar du dig att koden nedan hoppar över utskrift 2 till konsolen och bara visar 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 kommer inte ens att köras eftersom continue – instruktionen inte är i en slinga, liknande break – instruktionen.

lösning?

använd bara en normal for – slinga igen.

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

det var det! Hoppas du lärt dig något nytt idag.