nedávno jsem měl kódovací rozhovor, který zahrnoval vyhodnocení jednoho schématu proti druhému. Podrobnosti o tom nejsou tak důležité ,ale jedna věc, která z toho vyšla (uprostřed rozhovoru), byla, že se nemůžete vymanit ze smyčky forEach(). Zapomněl jsem na tu malou lahůdku a pravděpodobně to pokazilo moje šance na přijetí. Po přečtení tohoto, doufejme, nebudete dělat stejnou chybu jako já! Nebuď jako já.
pokud dáváte přednost sledování než čtení, Podívejte se na video verzi tohoto!
MDN zná všechny
jak uvádí MDN:
neexistuje žádný způsob, jak zastavit nebo zlomit smyčku forEach () jinak než tím, že hodí výjimku. Pokud takové chování potřebujete, metoda forEach() je nesprávným nástrojem
to je nějaký hardcore sass pocházející z dokumentů MDN. Mají však pravdu, protože je důležité vědět, který nástroj si vybrat.
než se dostaneme příliš hluboko do toho, proč se nemůžete vymanit z forEach(), podívejme se, co je smyčka dokonce a odkud pochází forEach().
co je smyčka
smyčka v programování řeší docela běžný problém: Musím spustit stejný kód proti všem těmto datům. Jednoduše řečeno, je to:
opakování stejného kódu znovu a znovu (na smyčce), dokud nedosáhneme definovaného koncového stavu.
problém
pro srovnání vyřešíme stejný problém pomocí různých typů smyček. Zde je problém:
Porovnejte dvě pole a zjistěte, zda jsou položky v nich stejné.
zde jsou data, která budeme porovnávat:
const jedis = const sith = máme dvě pole, obě s několika jmény. Pravděpodobně si všimnete, že Anakin je Jedi i Sith. Toto je triviální příklad, nicméně není daleko od toho, na čem jsem byl během rozhovoru testován.
starý způsob
co nechci, abyste z tohoto článku získali, je, že jedna smyčka je lepší než druhá. Všechny nabízejí jedinečná programovací řešení a mají místo pro konkrétní případy použití. Trik je vědět, který z nich použít kdy.
tradiční pro smyčku
pokud jste někdy absolvovali jakýkoli typ programovacího kurzu, pravděpodobně jste byli vystaveni našemu dobrému příteli smyčce for. Byl to užitečný nástroj pro programátory po dlouhou dobu a je stále užitečný i dnes. Vyřešme náš problém pomocí toho.
// 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`);}smyčka for nabízí docela šikovný způsob ukončení našeho kódu, pokud splňuje podmínku, kterou si vybereme. To je nesmírně užitečné při opakování přes tunu dat. Bylo to velmi užitečné při řešení některých problémů projektu Euler, konkrétně tohoto.
Další Způsob,
Mezi další věci, forEach() bylo vyraženo v spec v roce 2009 spolu se všemi ostatními bohu, který nám byl dán v ES5. Slouží jako užitečná metoda pro psaní čistého kódu, který snadno iteruje přes položky v poli.
co to dělá?
a forEach() smyčka je funkce, která spouští jinou funkci (zpětné volání) na každé položce v poli. Definujeme, co se stane v této funkci zpětného volání. JS je hodná a dala nám tři parametry v této funkci:
- položky v poli
- index položky
- celé pole
Pojďme se podívat na náš problém pomocí forEach() smyčka místo. Uvedl jsem všechny tři parametry ve funkci, ale používáme jen první položka, která jsem pojmenování 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) // falsePokud to dává větší smysl, můžete refaktorovat funkci zpětného volání do pojmenované funkce. Myslím, že je to trochu čitelnější. Také nám umožňuje tuto funkci znovu použít kdekoli chceme. Hurá funkční programování!
let matching function isJediAlsoSith(jedi,index,array) { if(!sith.includes(jedi)) { matching = false } } jedis.forEach(isJediAlsoSith)naše řešení v podstatě dělá totéž. Jediným rozdílem je, že běží, dokud nedosáhne konce pole jedis. U řady tak malých rozměrů pochybuji, že to bude mít velký rozdíl ve výkonu.
Ale Proč?
to nás konečně přivádí k odpovědi na naši otázku, proč se nemůžeme vymanit ze smyčky forEach()? Je to proto, že smyčka běží tuto funkci zpětného volání nad každou položkou, takže i když napíšete return, vrací se pouze na tuto instanci funkce. Jde to dál. V případě funkce forEach() nedělá s vráceným kódem nic. Uvědomte si, že tomu tak není u některých jiných metod pole.
navíc z tohoto důvodu break nebo continue nejsou platné příkazy.
jiné způsoby
existuje poměrně málo různých typů smyček. Všechny mají různé účely a já bych doporučil podívat se do každého z nich. Ne vždy potřebujete smyčku forEach().
forEach() vs map()
Pravděpodobné, nejčastější array metody, které se objevují v návody jsou forEach() a map() . Největší rozdíl mezi těmito dvěma je, že map vrátí nové pole, zatímco forEach() nebude.
tradiční smyčky
zatímco smyčka
metody pole
pole.forEach ()
Array.mapa ()
pole.filtr ()
pole.snížit ()
pole.reduceRight ()
pole.každý ()
pole.některé ()
pole.indexOf ()
pole.lastIndexOf ()
pole.najít ()
pole.findIndex()
Iterable Objekt Smyčky (včetně Polí)
v
To je Způsob,
Jak již bylo zmíněno dříve neuvěřitelně drzá MDN docs, výběr správného nástroje je rozhodující pro úspěch. Počet možností se může na první pohled zdát trochu ohromující, ale rád přistupuji k: „pokud to funguje, je to správný nástroj.“
obecně řečeno, můžete refaktorovat svůj kód k smrti, ale pak jen ztrácíte čas, který byste mohli stavět. V případě mého rozhovoru jsem použil správný nástroj, špatný způsob. Kdybych věděl, že si pamatujete, že se nemůžete vymanit ze smyčky forEach, věci by pravděpodobně dopadly jinak🤷 🏼 ♂️.
pokud máte nějaké další informace sdílet, prosím, drop to v komentářích níže!
jako vždy, šťastné kódování.
zástrčky
píšu knihu o grafickém designu a o tom, jak souvisí s vývojem softwaru! Pokud máte zájem, zaregistrujte se zde pro aktualizace.
https://digitalnutt.substack.com/p/coming-soon?r=34slo&utm_campaign=post&utm_medium=web&utm_source=copy
Hudba
také píšu hudbu! Podívejte se na to zde: Spotify | Youtube | Apple Music
Podpora
Pokud se vám líbí tento článek a chcete vidět více, nejlepší způsob, jak to udělat, je přihlásit se/následujte mě na zde! Pokud se cítíte laskavě, můžete mi koupit kávu!
