3 rzeczy, których nie wiedziałeś o pętli forEach w JS

myślisz, że wiesz dokładnie, jak działa pętla forEach w JS?

Cóż, to były moje myśli do niedawna: „po prostu zwykła pętla for, w której można łatwo użyć break lub return lub continue„.

dzisiaj pokażę Ci 3 rzeczy, których mogłeś nie wiedzieć o pętli forEach.

czy uważasz, że poniższy kod wydrukuje 1 2 , a następnie przestanie?

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

Nie, Nie będzie. jeśli pochodzisz z środowiska Java, prawdopodobnie zadałbyś sobie pytanie, Jak to możliwe?

powodem jest to, że przekazujemy funkcję zwrotną w naszej funkcji forEach, która zachowuje się jak normalna funkcja i jest stosowana do każdego elementu bez względu na to, czy return z jednego, czyli gdy element jest w naszym przypadku 2.

z oficjalnych dokumentów MDN:

nie ma sposobu, aby zatrzymać lub złamać pętlę forEach() inaczej niż przez rzucenie wyjątku. Jeśli potrzebujesz takiego zachowania, metoda forEach() jest niewłaściwym narzędziem.

przepiszmy kod z góry:

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

Instrukcja returnnie zrobi żadnej różnicy, ponieważ stosujemy funkcję do każdego elementu przy każdej iteracji, dlatego nie obchodzi go, czy zakończyłeś raz, np. gdy element jest 2.

nie możesz „złamać”

czy uważasz, że pętlaforEach byłaby break w poniższym przykładzie?

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

Nie, nawet nie uruchomi się, ponieważ instrukcja break nie jest technicznie w pętli.

rozwiązanie?

wystarczy użyć zwykłej pętli for. Nikt by się z ciebie nie śmiał.

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

nie możesz „kontynuować”

czy oczekujesz, że poniższy kod pominie drukowanie 2 do konsoli i wyświetli tylko 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

Nie, nawet nie uruchomi się, ponieważ instrukcja continue nie jest w pętli, podobnie jak instrukcja break.

rozwiązanie?

po prostu ponownie użyj normalnej pętli for.

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

to było to! Mam nadzieję, że nauczyłeś się dziś czegoś nowego.