So verwenden Sie Schleifen in JavaScript

Mit Schleifen können Sie jedes Element in einem Array durchlaufen, sodass Sie jedes Element nach Belieben anpassen und ausgeben können. Wie bei jeder Programmiersprache sind Schleifen auch in JavaScript ein wichtiges Werkzeug zum Rendern von Arrays.

Lassen Sie uns anhand einiger praktischer Beispiele tiefer in die verschiedenen Möglichkeiten eintauchen, wie Sie Schleifen in JavaScript verwenden können.

Die inkrementelle und dekrementelle for-Schleife in JavaScript

Die inkrementelle zum loop ist die Grundlage der Iteration in JavaScript.

Es nimmt einen einer Variablen zugewiesenen Anfangswert an und führt eine einfache bedingte Längenprüfung durch. Dann inkrementiert oder dekrementiert es diesen Wert mit der ++ oder -- Betreiber.

So sieht die allgemeine Syntax aus:

für (var i = Anfangswert; i < Array.Länge; ich++) {
Array[i]}

Lassen Sie uns nun ein Array mit der obigen Basissyntax durchlaufen:

einArray = [1, 3, 5, 6];
für (lassen Sie i = 0; i < anArray.Länge; ich++) {
console.log (anArray[i])
}
Ausgabe:
1
3
5
6 

Jetzt bearbeiten wir jedes Element im obigen Array mit JavaScript zum Schleife:

einArray = [1, 3, 5, 6];
für (lassen Sie i = 0; i < anArray.Länge; ich++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Ausgabe:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

Die Schleife durchläuft das Array inkrementell mit der ++ Operator, der eine geordnete Ausgabe erzeugt.

Aber mit dem Negativ (--)-Operator können Sie die Ausgabe umkehren.

Die Syntax ist die gleiche, aber die Logik unterscheidet sich etwas von der obigen Inkrementierungsschleife.

So funktioniert die Dekrementalmethode:

einArray = [1, 3, 5, 6];
für (lassen Sie i = anArray.length-1; ich > = 0; ich--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Ausgabe:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5

Die Logik hinter dem obigen Code ist nicht weit hergeholt. Die Array-Indizierung beginnt bei Null. Also anrufen einArray[i] normalerweise iteriert von Index null bis drei, da das obige Array vier Elemente enthält.

Daher ist es ziemlich praktisch, eins aus der Array-Länge zu entfernen und die Bedingung auf größer oder gleich null zu setzen, wie wir es getan haben – insbesondere, wenn Sie das Array als Grundlage Ihrer Iteration verwenden.

Es hält den Array-Index um eins kleiner als seine Länge. Die Bedingung ich >= 0 dann zwingt die Zählung, beim letzten Element im Array zu stoppen.

Verwandt: JavaScript-Array-Methoden, die Sie heute beherrschen sollten

JavaScript für jeden

Obwohl Sie mit JavaScript nicht dekrementieren können für jeden, es ist oft weniger ausführlich als das rohe zum Schleife. Es funktioniert, indem ein Element nach dem anderen ausgewählt wird, ohne sich das vorherige zu merken.

Hier ist die allgemeine Syntax von JavaScript für jeden:

array.forEach (element => {
Handlung
})

Sehen Sie sich an, wie es in der Praxis funktioniert:

sei einArray = [1, 3, 5, 6];
anArray.forEach (x => {
konsole.log (x)
});
Ausgabe:
1
3
5
6 

Verwenden Sie dies nun, um eine einfache mathematische Operation für jedes Element auszuführen, wie Sie es im vorherigen Abschnitt getan haben:

sei einArray = [1, 3, 5, 6];
anArray.forEach (x => {
console.log("5", "x", x, "=", x * 5)
});
Ausgabe:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30 

So verwenden Sie die for...in-Schleife von JavaScript

Die für in loop in JavaScript durchläuft ein Array und gibt seinen Index zurück.

Sie werden es einfach finden für in wenn du dich auskennst Pythons for-Schleife da sie in Bezug auf Einfachheit und Logik ähnlich sind.

Sehen Sie sich die allgemeine Syntax an:

für (Element im Array lassen){
Handlung 
}

Also die für in loop weist jedes Element in einem Array der in der Klammer deklarierten Variablen (Element) zu.

Daher gibt das Protokollieren des Elements direkt in der Schleife einen Array-Index zurück und nicht die Elemente selbst:

sei einArray = [1, 3, 5, 6];
für (lass ich in einArray){
Konsole.log (i)
}
Ausgabe:
0
1
2
3 

Um stattdessen jedes Element auszugeben:

sei einArray = [1, 3, 5, 6];
für (lass ich in einArray){
console.log (anArray[i])
}
Ausgabe:
1
3
5
6 

Wie bei der Verwendung der Dekrementalschleife ist es auch einfach, die Ausgabe mit umzukehren für in:

sei einArray = [1, 3, 5, 6];
// Entferne einen aus der Länge des Arrays und weise dies einer Variablen zu:
sei v = anArray.length - 1; 
// Verwenden Sie die obige Variable als Indexbasis beim Durchlaufen des Arrays:
für (lass ich in einArray){
console.log (anArray[v])
v -=1;
}
Ausgabe:
6
5
3
1 

Der obige Code ähnelt logisch dem, was Sie bei der Verwendung der Dekrementalschleife getan haben. Es ist jedoch lesbarer und expliziter umrissen.

JavaScript für... von Loop

Die für...von Schleife ist ähnlich wie die für in Schleife.

Im Gegensatz zu für in, iteriert es nicht durch den Array-Index, sondern durch die Elemente selbst.

Seine allgemeine Syntax sieht wie folgt aus:

für (lass ich von Array) {
Handlung 
}

Lassen Sie uns diese Schleifenmethode verwenden, um ein Array inkrementell zu durchlaufen, um zu sehen, wie es funktioniert:

sei einArray = [1, 3, 5, 6];
for (lass ich von einemArray) {
Konsole.log (i)
}
Ausgabe:
1
3
5
6 

Sie können diese Methode auch verwenden, um das Array nach unten zu durchlaufen und die Ausgabe umzukehren. Es ist ähnlich wie bei der Verwendung von für in:

sei einArray = [1, 3, 5, 6];
sei v = anArray.length - 1;
for (lass x von einemArray) {
console.log (anArray[v])
v -=1;
}
Ausgabe:
6
5
3
1

Um innerhalb der Schleife zu arbeiten:

sei einArray = [1, 3, 5, 6];
sei v = anArray.length - 1;
for (lass x von einemArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Ausgabe:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5 

Die While-Schleife

Die während Schleife läuft kontinuierlich, solange eine angegebene Bedingung wahr bleibt. Es wird oft als Endlosschleife verwendet.

Da beispielsweise null immer kleiner als zehn ist, wird der folgende Code kontinuierlich ausgeführt:

sei i = 0;
während (ich < 10) {
konsole.log (4)
}

Der obige Code protokolliert "4" unendlich.

Lassen Sie uns ein Array mit dem durchlaufen während Schleife:

sei i = 0;
while (i < anArray.length) {
console.log (anArray[i])
ich +=1
}
Ausgabe:
1
3
5
6 

JavaScript do...während Loop

Die mach...während Schleife akzeptiert und führt eine Reihe von Aktionen explizit innerhalb von a. aus tun Syntax. Es gibt dann die Bedingung für diese Aktion innerhalb der während Schleife.

So sieht es aus:

tun{
Aktionen
}
während (
Zustand
)

Lassen Sie uns nun mit dieser Schleifenmethode durch ein Array iterieren:

tun{
console.log (anArray[i])
ich +=1
}
während (
i < anArray.Länge
)
Ausgabe:
1
3
5
6 

Machen Sie sich mit JavaScript Loops vertraut

Obwohl wir hier die verschiedenen JavaScript-Looping-Methoden hervorgehoben haben, können Sie diese flexibel und sicher in Ihren Programmen verwenden, wenn Sie die Grundlagen der Iteration in der Programmierung beherrschen. Die meisten dieser JavaScript-Schleifen funktionieren jedoch auf die gleiche Weise, mit nur wenigen Unterschieden in ihrer allgemeinen Gliederung und Syntax.

Schleifen sind jedoch die Grundlage der meisten clientseitigen Array-Renderings. Fühlen Sie sich also frei, diese Looping-Methoden nach Belieben zu optimieren. Wenn Sie sie beispielsweise mit komplexeren Arrays verwenden, erhalten Sie ein besseres Verständnis von JavaScript-Schleifen.

So verwenden Sie die JavaScript if-else-Anweisung

Die if-else-Anweisung ist Ihr erster Schritt zur Programmierung von Logik in Ihren Anwendungen.

Weiter lesen

Über den Autor