3 asiaa, joita et tiennyt JS: n forEach-silmukasta

luuletko tietäväsi tarkalleen, miten forEach silmukka toimii JS: ssä?

no, nämä olivat ajatukseni viime aikoihin asti: ”ihan tavallinenfor silmukka, jossa voi helposti käyttää break tai return tai continue”.

tänään näytän 3 asiaa, joita et ehkä tiennyt forEach luupista.

luuletko, että alla oleva koodi tulostaisi 1 2 ja lopettaisi sitten?

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

ei, ei tule. jos tulet Java-taustalta, kysyisit todennäköisesti itseltäsi, miten se on mahdollista?

syynä on se, että ohitamme forEach funktiossamme takaisinkutsufunktion, joka käyttäytyy aivan kuin normaali funktio ja sitä sovelletaan jokaiseen alkuaineeseen riippumatta siitä, jos me return yhdestä eli kun meidän tapauksessamme alkio on 2.

virallisista MDN-asiakirjoista:

forEach() lenkkiä ei voi pysäyttää tai katkaista muuten kuin heittämällä poikkeusluvalla. Jos tällaista käytöstä tarvitaan, forEach() – metodi on väärä työkalu.

kirjoitetaan koodi uudestaan ylhäältä:

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

returnlauseella ei ole mitään merkitystä, sillä sovellamme funktiota jokaiseen alkuaineeseen jokaisessa iteraatiossa, joten sillä ei ole väliä, jos poistuit kerran eli kun elementti on 2.

et voi ’rikkoa’

luuletko, ettäforEach silmukka olisi break alla olevassa esimerkissä?

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

ei, se ei edes juokse, koska break ohje ei ole teknisesti silmukassa.

ratkaisu?

käytä vain normaalia for silmukkaa. Kukaan ei naura sinulle.

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

et voi ”jatkaa”

Odotatko alla olevan koodin ohittavan tulostuksen 2 konsolille ja näyttävän vain 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

ei, se ei edes juokse, koska continue ohje ei ole silmukassa, kuten break ohje.

ratkaisu?

käytä taas normaalia for silmukkaa.

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

that was it! Toivottavasti opit tänään jotain uutta.