Waarom u't een forEach lus | ByteSize js

kan breken Ik heb onlangs een coderingsinterview gehad waarin het ene schema tegen het andere werd geëvalueerd. De details ervan zijn niet zo belangrijk, maar een ding dat eruit kwam (in het midden van het interview) was dat je niet uit een forEach() lus kunt breken. Ik was dat kleine dingetje vergeten en het heeft waarschijnlijk mijn kansen verpest om aangenomen te worden. Als je dit leest, maak je hopelijk niet dezelfde fout als ik. Wees niet zoals ik.

https://media.giphy.com/media/nRkQduJDZ43bW/giphy.gif

als je liever kijkt dan leest, bekijk dan de video versie van deze!

MDN kent alle

zoals aangegeven door MDN:

er is geen manier om te stoppen of breken een foreach() lus anders dan door het gooien van een uitzondering. Als je dergelijk gedrag nodig hebt, is de forEach () methode het verkeerde gereedschap

dat is een hardcore sass afkomstig van de MDN docs. Ze hebben echter gelijk, weten welke tool te kiezen is belangrijk.

voordat we te diep gaan in waarom je niet uit een forEach() kunt breken, laten we eens kijken wat een lus is en waar forEach() vandaan kwam.

Wat is een lus

een lus in programmeren lost een veel voorkomend probleem op: Ik moet dezelfde code gebruiken met al deze gegevens. Simpel gezegd, het is:

het herhalen van dezelfde code over en over (op lus) tot we een gedefinieerde eindtoestand bereiken.

het probleem

ter vergelijking gaan we hetzelfde probleem oplossen met behulp van de verschillende lus types. Hier is het probleem:

Vergelijk twee arrays en kijk of de items erin hetzelfde zijn.

hier zijn de gegevens die we gaan vergelijken:

 const jedis = const sith = 

we hebben twee arrays, beide met een paar namen. Je zult waarschijnlijk merken dat Anakin zowel een Jedi als een Sith is. Dit is een triviaal voorbeeld, maar niet ver af van wat ik werd getest op tijdens mijn interview.

de Oude a manier

wat ik niet wil dat je uit dit artikel krijgt is dat de ene lus beter is dan de andere. Ze bieden allemaal unieke programmeeroplossingen en hebben een plek voor specifieke use cases. De truc is om te weten welke je moet gebruiken wanneer.

traditioneel voor Loop

Als u ooit een programmeercursus hebt gevolgd, bent u waarschijnlijk blootgesteld aan onze goede vriend de loop for. Het is een handige tool voor programmeurs voor een lange tijd en is nog steeds nuttig vandaag. Laten we ons probleem oplossen door het te gebruiken.

// Our data again, for referenceconst jedis = ;const sith = ;// start our loop, define our iterator variablefor (let i = 0; i < jedis.length; i++) { // create a variable we can reference const thisJedi = jedis; // see if the item in the array we are testing exists if (sith.includes(thisJedi)) { // If it does exist, then that jedi is also a sith console.log(`${thisJedi} is also a Sith`); // we can exit out break; } console.log(`${thisJedi} is not a Sith`);}

de for loop biedt een vrij handige manier van het verlaten van onze code als het voldoet aan een voorwaarde die we kiezen. Dit is enorm nuttig bij het loopen van meer dan een TON van gegevens. Het is zeer nuttig geweest bij het oplossen van een aantal van de problemen van het Project Euler, met name deze.

The New Another Way

onder andere, forEach() werd gestempeld in de spec in 2009 samen met alle andere goedheid die ons werd gegeven in ES5. Het dient als een handige methode om schone code te schrijven die gemakkelijk itereert over items in een array.

wat doet het?

een forEach() lus is een functie die een andere functie (callback) uitvoert op elk item in een array. We definiëren wat er gebeurt in die callback functie. JS is mooi genoeg om ons drie parameters in die functie te geven:

  1. het item in de array
  2. de index van het item
  3. de hele array

laten we eens kijken naar ons probleem met behulp van een lus forEach(). Ik heb alle drie parameters in de functie opgenomen, maar we gebruiken alleen de eerste, het item, dat ik noem jedi

 // We have to create a global state variable to keep track of what is happening let matching // loop over array jedis.forEach((jedi,index,array) => { // check to see if jedi is in sith if(!sith.includes(jedi)) { // if it isn't, set global variable to false matching = false } // it keeps going... }) console.log(matching) // false

als het zinvoller is, kunt u de callback-functie refactor in een benoemde functie. Ik denk dat het het wat leesbaarder maakt. Het stelt ons ook in staat om deze functie te hergebruiken waar we maar willen. Yay functioneel programmeren!

 let matching function isJediAlsoSith(jedi,index,array) { if(!sith.includes(jedi)) { matching = false } } jedis.forEach(isJediAlsoSith)

onze oplossing doet in wezen hetzelfde. Het enige verschil is dat het blijft draaien tot het einde van de jedis array bereikt. Voor een array van zo ‘ n klein formaat, betwijfel ik of het veel van een prestatie verschil zal maken.

Maar Waarom?

dit brengt ons uiteindelijk bij het antwoord op onze vraag, waarom kunnen we niet uit een forEach() lus breken? Dat komt omdat de lus die callback-functie over elk item draait, dus zelfs als je een return schrijft, komt hij alleen terug op die instantie van de functie. Het gaat maar door. In het geval van de functie forEach() doet het niets met de geretourneerde code. Wees ervan bewust, dat is niet het geval voor sommige van de andere Array methoden.

Bovendien zijn break of continue hierdoor geen geldige verklaringen.

andere manieren

er zijn nogal wat verschillende soorten lussen. Ze hebben allemaal verschillende doeleinden en ik zou aanraden op zoek naar elk. U heeft niet altijd een lus forEach() nodig.

https://media.giphy.com/media/tnwuVMx6n1VtK/giphy.gif

forEach () vs map ()

waarschijnlijk zijn de meest voorkomende array methoden die in tutorials verschijnen forEach() en map() . Het grootste verschil tussen de twee is dat map een nieuwe Array retourneert, terwijl een forEach() dat niet doet.

traditionele lussen

terwijl lus

Array methoden

Array.forEach ()

Array.map ()

Array.filter ()

Array.reduce ()

Array.reduceRight ()

Array.elke ()

Array.some ()

Array.indexOf ()

Array.lastindex of ()

Array.find ()

Array.findIndex()

Iterable Object Loops (including Arrays)

for in

For of

Dit is de manier

Baby Yoda

zoals eerder vermeld door de ongelooflijk sassy MDN docs, is het kiezen van de juiste tool cruciaal voor succes. Het aantal opties lijkt misschien een beetje overweldigend op het eerste, maar ik hou van de aanpak van: “als het werkt, het is de juiste tool.”

in het algemeen kun je je code herstofferen tot de dood, maar dan verspil je gewoon tijd, je zou dingen kunnen bouwen. In het geval van mijn interview, gebruikte ik de juiste tool, de verkeerde manier. Als ik had geweten dat je niet uit een forEach lus kunt breken, zou het waarschijnlijk anders zijn gelopen🤷 🏼 ♂ ️.

als u nog meer informatie wilt delen, laat het dan vallen in de commentaren hieronder!

zoals altijd, goede codering.

pluggen

ik schrijf een boek over grafisch ontwerp en hoe het zich verhoudt tot softwareontwikkeling! Als je geïnteresseerd bent, meld je hier aan voor updates.

https://digitalnutt.substack.com/p/coming-soon?r=34slo&utm_campaign=post&utm_medium=web&utm_source=copy

Muziek

ik schrijf ook muziek! Bekijk het hier: Spotify / Youtube / Apple Music

Support

als je dit artikel leuk vindt en meer wilt zien, is de beste manier om dat te doen door je hier in te schrijven/volg mij! Als je je gracieus voelt, kun je me op een koffie trakteren!



+