Warum Sie't eine forEach-Schleife | ByteSize JS

Ich hatte kürzlich ein Codierungsinterview, bei dem ein Schema gegen ein anderes ausgewertet wurde. Die Details sind nicht so wichtig, aber eine Sache, die daraus hervorging (mitten im Interview), war, dass man nicht aus einer forEach() -Schleife ausbrechen kann. Ich hatte diesen kleinen Leckerbissen vergessen und es hat wahrscheinlich meine Chancen, eingestellt zu werden, vermasselt. Nachdem Sie dies gelesen haben, werden Sie hoffentlich nicht den gleichen Fehler machen, den ich gemacht habe! Sei nicht wie ich.

Wenn Sie lieber sehen als lesen, schauen Sie sich die Videoversion davon an!

MDN weiß alles

Wie von MDN festgestellt:

Es gibt keine andere Möglichkeit, eine forEach () -Schleife zu stoppen oder zu unterbrechen, als eine Ausnahme auszulösen. Wenn Sie ein solches Verhalten benötigen, ist die forEach() -Methode das falsche Werkzeug

Das ist ein Hardcore-Sass aus den MDN-Dokumenten. Sie haben jedoch Recht, es ist wichtig zu wissen, welches Werkzeug Sie wählen sollen.

Bevor wir uns zu sehr damit befassen, warum Sie nicht aus einer forEach() ausbrechen können, wollen wir untersuchen, was eine Schleife überhaupt ist und woher forEach() stammt.

Was ist eine Schleife

Eine Schleife in der Programmierung löst ein ziemlich häufiges Problem: Ich muss den gleichen Code für all diese Daten ausführen. Einfach gesagt, es ist:

Wiederholen Sie den gleichen Code immer wieder (On-Schleife), bis wir einen definierten Endzustand erreichen.

Das Problem

Zum Vergleich werden wir das gleiche Problem mit den verschiedenen Schleifentypen lösen. Hier ist das Problem:

Vergleichen Sie zwei Arrays und prüfen Sie, ob die darin enthaltenen Elemente identisch sind.

Hier sind die Daten, die wir vergleichen werden:

 const jedis = const sith = 

Wir haben zwei Arrays, beide mit ein paar Namen. Sie werden wahrscheinlich bemerken, dass Anakin sowohl ein Jedi als auch ein Sith ist. Dies ist ein triviales Beispiel, jedoch nicht weit entfernt von dem, was ich während meines Interviews getestet habe.

Der alte Weg

Was ich nicht möchte, dass Sie von diesem Artikel erhalten, ist, dass eine Schleife besser ist als eine andere. Sie alle bieten einzigartige Programmierlösungen und haben einen Platz für spezifische Anwendungsfälle. Der Trick besteht darin, zu wissen, welches wann verwendet werden soll.

Traditionelle For-Schleife

Wenn Sie jemals einen Programmierkurs besucht haben, wurden Sie wahrscheinlich unserem guten Freund, der for -Schleife, ausgesetzt. Es war lange Zeit ein praktisches Werkzeug für Programmierer und ist heute noch nützlich. Lassen Sie uns unser Problem damit lösen.

// 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`);}

Die for-Schleife bietet eine ziemlich praktische Möglichkeit, unseren Code zu verlassen, wenn er eine von uns gewählte Bedingung erfüllt. Dies ist immens hilfreich, wenn Sie eine Menge Daten durchlaufen. Es war sehr hilfreich bei der Lösung einiger der Euler-Probleme des Projekts, insbesondere dieses.

Der neue Another Way

Unter anderem wurde forEach() 2009 zusammen mit all der anderen Güte, die uns in ES5 gegeben wurde, in die Spezifikation aufgenommen. Es dient als praktische Methode zum Schreiben von sauberem Code, der problemlos über Elemente in einem Array iteriert.

Was macht es?

Eine forEach() Schleife ist eine Funktion, die eine andere Funktion (Callback) für jedes Element in einem Array ausführt. Wir definieren, was in dieser Rückruffunktion passiert. JS ist nett genug, um uns drei Parameter in dieser Funktion zu geben:

1. Das Element im Array
2. Der Index des Elements
3. Das gesamte Array

Werfen wir einen Blick auf unser Problem, indem wir stattdessen eine forEach() Schleife verwenden. Ich habe alle drei Parameter in die Funktion aufgenommen, aber wir verwenden nur den ersten, das Element, das ich benenne 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

Wenn es sinnvoller ist, können Sie die Rückruffunktion in eine benannte Funktion umgestalten. Ich denke, es macht es ein bisschen lesbarer. Es erlaubt uns auch, diese Funktion wiederzuverwenden, wo immer wir wollen. Yay funktionale Programmierung!

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

Unsere Lösung macht im Wesentlichen dasselbe. Der einzige Unterschied besteht darin, dass es so lange ausgeführt wird, bis es das Ende des Arrays jedis erreicht. Für ein Array von so geringer Größe bezweifle ich, dass es einen großen Leistungsunterschied machen wird.

Aber warum?

Dies bringt uns schließlich zur Antwort auf unsere Frage, warum können wir nicht aus einer forEach() Schleife ausbrechen? Dies liegt daran, dass die Schleife diese Rückruffunktion für jedes Element ausführt, sodass selbst wenn Sie ein return schreiben, nur diese Instanz der Funktion zurückgegeben wird. Es geht weiter. Im Fall der Funktion forEach() macht sie nichts mit dem zurückgegebenen Code. Beachten Sie, dass dies bei einigen anderen Array-Methoden nicht der Fall ist.

Aus diesem Grund sind break oder continue keine gültigen Anweisungen.

Andere Möglichkeiten

Es gibt einige verschiedene Arten von Schleifen. Sie alle haben unterschiedliche Zwecke und ich würde empfehlen, in jeden zu schauen. Sie benötigen nicht immer eine forEach() -Schleife.

forEach() vs map()

Wahrscheinlich sind die häufigsten Array-Methoden, die in Tutorials angezeigt werden, forEach() und map() . Der größte Unterschied zwischen den beiden ist, dass map ein neues Array zurückgibt, während forEach() dies nicht tut.

Traditionelle Schleifen

While-Schleife

Array-Methoden

Array.forEach()

Array.karte()

Array.filter()

Array.reduce()

Array.reduceRight()

Array.jedes()

Array.einige()

Array.indexOf()

Array.lastIndexOf()

Array.find()

Array.findIndex()

Iterable Objektschleifen (einschließlich Arrays)

für in

für of

Dies ist der Weg

Wie bereits in den unglaublich frechen MDN-Dokumenten erwähnt, ist die Auswahl des richtigen Tools von größter Bedeutung, um erfolg. Die Anzahl der Optionen mag zunächst etwas überwältigend erscheinen, aber ich verfolge gerne den Ansatz: „Wenn es funktioniert, ist es das richtige Werkzeug.“

Im Allgemeinen können Sie Ihren Code zu Tode umgestalten, aber dann verschwenden Sie nur Zeit, um Dinge zu bauen. Im Falle meines Interviews habe ich das richtige Werkzeug benutzt, den falschen Weg. Hätte ich gewusst, dass man nicht aus einer forEach-Schleife ausbrechen kann, wären die Dinge wahrscheinlich anders ausgegangen 🤷🏼♂️.

Wenn Sie zusätzliche Informationen teilen, lassen Sie es bitte in den Kommentaren unten!

Wie immer viel Spaß beim Codieren.

Ich schreibe ein Buch über Grafikdesign und wie es sich auf Softwareentwicklung bezieht! Wenn Sie interessiert sind, melden Sie sich hier für Updates an.

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

Musik

Ich schreibe auch Musik! Schau es dir hier an: Startseite / Schlagworte / Spotify / Youtube / Apple Music

Unterstützung

Wenn Ihnen dieser Artikel gefällt und Sie mehr sehen möchten, abonnieren / folgen Sie mir am besten hier! Wenn Sie sich gnädig fühlen, können Sie mir einen Kaffee kaufen!