3 cose che non sai su ciclo forEach in JS

pensi di sapere esattamente come la forEach loop funziona in JS?

Bene, questi erano i miei pensieri fino a poco tempo fa: “solo un normale ciclo for dove puoi facilmente usare break o return o continue“.

Oggi ti mostrerò 3 cose che potresti non sapere sul ciclo forEach.

Pensi che il codice qui sotto stamperebbe 1 2 e poi si fermerebbe?

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

No, non lo farà. Se vieni da uno sfondo Java, probabilmente ti chiederesti come è possibile?

Il motivo è che stiamo passando una funzione di callback nella nostra funzione forEach, che si comporta proprio come una funzione normale e viene applicata a ciascun elemento non importa se return da uno cioè quando l’elemento è 2 nel nostro caso.

Dai documenti ufficiali MDN:

Non c’è modo di interrompere o interrompere un ciclo forEach() se non lanciando un’eccezione. Se hai bisogno di tale comportamento, il metodo forEach() è lo strumento sbagliato.

Riscriviamo il codice dall’alto:

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’istruzione returnnon farà alcuna differenza, poiché applichiamo la funzione a ciascun elemento ad ogni iterazione, quindi non importa se sei uscito una volta, cioè quando l’elemento è 2.

Non puoi ‘rompere’

Pensi che un ciclo forEach sarebbe break nell’esempio seguente?

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

No, non verrà nemmeno eseguito perché l’istruzione break non è tecnicamente in un ciclo.

Soluzione?

Basta usare un normale ciclo for. Nessuno riderebbe di te.

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

Non puoi ‘continuare’

Ti aspetti che il codice qui sotto salti la stampa 2 sulla console e mostri solo 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

No, non verrà nemmeno eseguito perché l’istruzione continue non è in un ciclo, simile all’istruzione break.

Soluzione?

Usa di nuovo un normale ciclo for.

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

Che era! Spero che tu abbia imparato qualcosa di nuovo oggi.