JS For Loop Tutorial - Iterieren über ein Array in JavaScript

In diesem Artikel erfahren Sie genau, wie Sie eine Array-Datenstruktur in JavaScript durchlaufen.

Egal, ob Sie gerade erst anfangen, JavaScript zu lernen, oder hier sind, um sich zu erfrischen, es wird für Sie einen Wert geben. Dieser Artikel führt Sie durch eines der am häufigsten verwendeten JavaScript-Konzepte.

Was ist ein Array?

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

Oben sehen Sie ein JavaScript-Array, in dem mehrere Werte gespeichert werden. Dies ist eine der einfachsten Formen eines Arrays. Es enthält 4 "Elemente" innerhalb des Arrays, alle Zeichenfolgen. Und wie Sie sehen, wird jedes Element durch ein Komma getrennt.

Dieses Beispielarray enthält verschiedene Automarken und kann mit der carsVariablen referenziert werden.

Es gibt eine Reihe von Möglichkeiten, wie wir über dieses Array iterieren können. JavaScript ist unglaublich funktionsreich, daher haben wir den Luxus, den besten Weg zur Lösung unseres Problems zu wählen.

So werden wir das Iterieren über Arrays in JavaScript angehen:

  1. Markieren Sie 5 gängige Methoden zum Durchlaufen eines Arrays
  2. Zeigen Sie einige Einblicke in jede iterative Methode
  3. Geben Sie einen Code an, mit dem Sie ihn auch testen können!

Traditionell für Schleife

Was ist eine For-Schleife?

Wikipedia definiert eine For-Schleife als:

"In der Informatik ist eine for-Schleife (oder einfach eine for-Schleife ) eine Kontrollflussanweisung zum Festlegen der Iteration, mit der Code wiederholt ausgeführt werden kann ."

Eine for-Schleife ist eine Möglichkeit, Code wiederholt auszuführen. Anstatt console.log(“hi”)fünfmal zu tippen, können Sie es auch in eine for-Schleife einschließen.

In diesem ersten Beispiel lernen wir, wie Sie das oben gezeigte Auto-Array durchlaufen und jedes Element ausdrucken. Der Iterator oder Zähler beginnt beim ersten Index „Tesla“ und endet beim letzten „Audi“. Es bewegt sich durch das Array und druckt jeweils ein Element.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"]; for(let i = 0; i < cars.length; i++) { console.log(cars[i]); }

Ausgabe:

Tesla Ferrari Lamborghini Audi

Beim Eintauchen in den Code übergeben wir drei Optionen an die for-Schleife

  • die Iteratorvariable - let i = 0;
  • wo der Iterator aufhören soll - i < card.length
  • Wie viel muss der Iterator in jeder Schleife erhöht werden? i++

Diese Schleife beginnt bei 0, erhöht die Variable um jeweils eine Schleife und stoppt, wenn wir das letzte Element im Array treffen.

Der Hauptvorteil der herkömmlichen for-Schleife besteht darin, dass Sie mehr Kontrolle haben.

Es ist möglich, auf verschiedene Elemente innerhalb des Arrays zuzugreifen oder das Array auf raffinierte Weise zu durchlaufen, um ein komplexes Problem zu lösen. Zum Beispiel kann das Überspringen jedes anderen Elements im Array mit der herkömmlichen for-Schleife ganz einfach durchgeführt werden.

Die forEach-Methode

Was ist die forEach-Methode?

Die forEachMethode wird verwendet, um eine Funktion für jedes Element Ihres Arrays auszuführen. Diese Methode ist eine gute Wahl, wenn die Länge des Arrays "unbekannt" ist oder sich garantiert ändert. Diese Methode kann nur mit Arrays, Sets und Maps verwendet werden.

const amounts = [65, 44, 12, 4]; let doubledAmounts = []; amounts.forEach(item => { doubledAmounts.push(item * 2); }) console.log(doubledAmounts);

Der größte Vorteil einer forEachSchleife besteht darin, auf jedes Element zugreifen zu können, selbst wenn die Größe Ihres Arrays wahrscheinlich zunimmt. Es ist eine skalierbare Lösung für viele Anwendungsfälle und leichter zu lesen und zu verstehen als eine herkömmliche for-Schleife, da wir wissen, dass wir jedes Element genau einmal durchlaufen werden.

While-Schleife

Was ist eine While-Schleife?

Wikipedia definiert eine While-Schleife als:

„Eine while-Schleife ist eine Kontrollflussanweisung, mit der Code basierend auf einer bestimmten booleschen Bedingung wiederholt ausgeführt werden kann. Die while- Schleife kann als sich wiederholende if-Anweisung betrachtet werden.

Eine whileSchleife ist eine Möglichkeit, Code wiederholt auszuführen, um zu überprüfen, ob eine Bedingung wahr oder falsch ist. Anstatt eine for-Schleife mit einer verschachtelten if-Anweisung zu verwenden, können wir auch eine while-Schleife verwenden. Oder wenn wir die Länge des Arrays nicht finden können, während Schleifen eine ausgezeichnete Wahl sind.

Die while-Schleife wird oft von einem Zähler gesteuert. Im folgenden Beispiel zeigen wir eine grundlegende while-Schleife, die durch ein Array iteriert. Der Schlüssel ist, die Kontrolle über die von Ihnen erstellte while-Schleife zu haben.

While-Schleifenbeispiel (gut):

let i = 0 while (i < 5) { console.log(i); i++; }

Ausgabe :

0 1 2 3 4

Die if-Anweisung der while-Schleife lautet i < 5"i is less than 5" oder wird laut gesprochen. Die Variable iwird jedes Mal erhöht, wenn die Schleife ausgeführt wird.

In einfachen Worten bedeutet dies, dass der Variablen ijedes Mal 1 hinzugefügt wird, wenn die Schleife eine vollständige Iteration durchführt. Bei der ersten Iteration iist gleich 0 und wir drucken "0" auf der Konsole.

Das größte Risiko bei der Verwendung einer while-Schleife besteht darin, eine Bedingung zu schreiben, die niemals erfüllt wird.

Dies tritt häufig in realen Szenarien auf, in denen jemand eine while-Schleife schreibt, aber vergisst, seine Schleife zu testen, und eine Endlosschleife in die Codebasis einführt.

Eine Endlosschleife tritt auf, wenn die Bedingung nie erfüllt ist und die Schleife für immer weiterläuft. Dies führt häufig dazu, dass Änderungen unterbrochen werden, wodurch die gesamte Softwareanwendung unterbrochen wird und nicht mehr funktioniert.

Warnung: Führen Sie diesen Code nicht aus.

Beispiel für eine Endlosschleife (schlecht):

let i = 0 while (i < 5) { console.log(i); }

Ausgabe:

Ergebnisse können variieren.

Die Do While-Schleife

Was ist eine do while-Schleife?

Wikipedia definiert eine Do-While-Schleife als:

"Eine do while-Schleife ist eine Kontrollflussanweisung, die einen Codeblock mindestens einmal ausführt und dann den Block wiederholt ausführt oder nicht, abhängig von einer bestimmten booleschen Bedingung am Ende des Blocks."

Eine do-while-Schleife ist fast identisch mit einer while-Schleife, es gibt jedoch einen wesentlichen Unterschied. Die do-while-Schleife garantiert, dass der Codeblock immer mindestens einmal ausgeführt wird, bevor die if-Anweisung überprüft wird.

Ich stelle es mir oft als umgekehrte while-Schleife vor und benutze sie fast nie. Sie sind jedoch in einigen sehr spezifischen Szenarien nützlich.

Do-Loop-Beispiel (gut):

let i = 0; do { console.log(i); i++; } while (i < 5);

Ausgabe :

0 1 2 3 4

Das größte Risiko bei der Verwendung einer do-Schleife besteht darin, eine Bedingung zu schreiben, die niemals erfüllt ist. (Wie bei einer While-Schleife.)

Warnung: Führen Sie diesen Code nicht aus.

Beispiel für eine Endlosschleife (schlecht):

let i = 0; do { console.log(i); } while (i < 5);

Ausgabe :

Ergebnisse können variieren.

Möchten Sie Ihr JavaScript-Wissen auf die nächste Stufe bringen? Erfahren Sie mehr darüber map, was das gleiche ist forEach, aber mit einem Bonus! ?

BONUS Beispiel (Iteration mit Karte)

Was ist eine Karte?

Wikipedia definiert eine Karte als:

„In vielen Programmiersprachen ist map der Name einer Funktion höherer Ordnung, die eine bestimmte Funktion auf jedes Element eines Funktors anwendet, z. B. eine Liste, und eine Liste der Ergebnisse in derselben Reihenfolge zurückgibt. In funktionaler Form wird es oft als auf alle anwendbar bezeichnet . “

How does it work? The map function in JavaScript applies a function to every element inside the array. Please take a moment to re-read that sentence.

Afterwards, the map function returns a new array with the results of applying a function to every element in the array.

Map example:

const array = [1, 1, 1, 1]; // pass a function to map const results = array.map(x => x * 2); console.log(results);

Output:

[2,2,2,2]

We have applied the map function to the array containing four 1's. The map function then multiplied each element by 2, i.e., x * 2, and returned a new array. The new array was then stored in the results variable.

By viewing our output, we can see this worked successfully. Every element in the array has been multiplied by 2. This method can be used as a replacement to a loop in some cases, and is incredibly powerful.

Conclusion

Well done! You have learned five different ways to iterate over an array in JavaScript. These are the fundamental building blocks that will set you up for success in your JavaScript programming journey.

You have also been exposed to an advanced concept, map, which is used often in large-scale software applications.

So, I’ll leave you with this: how are you going to use arrays in your projects? And which iteration method did you find most exciting?  

Thanks for reading!

If you liked my article, please follow me and/or send me a message!  

Twitter • Medium • Github