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 for- Schleife 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 wird dieser Wert mit den Operatoren ++ oder — inkrementiert oder dekrementiert.
So sieht die allgemeine Syntax aus:
for(var i = initial value; i < array.length; i++) {
array[i]}
Lassen Sie uns nun ein Array mit der obigen Basissyntax durchlaufen:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log(anArray[i])
}
Output:
1
3
5
6Jetzt bearbeiten wir jedes Element im obigen Array mit der JavaScript- for- Schleife:
anArray = [1, 3, 5, 6];
for(let i = 0; i < anArray.length; i++) {
console.log("5", "x", anArray[i], "=", anArray[i] * 5)
}
Output:
5 x 1 = 5
5 x 3 = 15
5 x 5 = 25
5 x 6 = 30
Die Schleife durchläuft das Array inkrementell mit dem ++- Operator und erzeugt eine geordnete Ausgabe.
Mit dem negativen Operator ( — ) können Sie die Ausgabe jedoch umkehren.
Die Syntax ist die gleiche, aber die Logik unterscheidet sich etwas von der obigen Inkrementierungsschleife.
So funktioniert die Dekrementalmethode:
anArray = [1, 3, 5, 6];
for(let i = anArray.length-1; i > = 0; i--) {
console.log("5", "x", anArray[i], "=", anArray[i]*5)
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5Die Logik hinter dem obigen Code ist nicht weit hergeholt. Die Array-Indizierung beginnt bei Null. Der Aufruf von anArray[i] iteriert also normalerweise 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 das Array als Grundlage für Ihre Iteration verwendet wird.
Es hält den Array-Index um eins kleiner als seine Länge. Die Bedingung i >= 0 erzwingt dann, dass die Zählung beim letzten Element im Array stoppt.
JavaScript für jeden
Obwohl Sie mit forEach von JavaScript nicht dekrementieren können, ist es oft weniger ausführlich als die rohe for- 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 forEach :
array.forEach(element => {
action
})Sehen Sie sich an, wie es in der Praxis funktioniert:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log(x)
});
Output:
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:
let anArray = [1, 3, 5, 6];
anArray.forEach(x => {
console.log("5", "x", x, "=", x * 5)
});
Output:
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 for…in- Schleife in JavaScript durchläuft ein Array und gibt seinen Index zurück.
Sie werden feststellen, dass es einfach ist, for…in zu verwenden, wenn Sie mit Pythons for-Schleife vertraut sind, da sie in Bezug auf Einfachheit und Logik ähnlich sind.
Sehen Sie sich die allgemeine Syntax an:
for (let element in array){
action
}Die for…in- Schleife weist also 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:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(i)
}
Output:
0
1
2
3
Um stattdessen jedes Element auszugeben:
let anArray = [1, 3, 5, 6];
for (let i in anArray){
console.log(anArray[i])
}
Output:
1
3
5
6
Wie bei der Verwendung der Dekrementalschleife ist es auch einfach, die Ausgabe mit for…in umzukehren:
let anArray = [1, 3, 5, 6];
// Remove one from the length of the array and assign this to a variable:
let v = anArray.length - 1;
// Use the above variable as an index basis while iterating down the array:
for (let i in anArray){
console.log(anArray[v])
v -=1;
}
Output:
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 for…of- Schleife ähnelt der for…in- Schleife.
Im Gegensatz zu for…in durchläuft es jedoch nicht den Array-Index, sondern die Elemente selbst.
Seine allgemeine Syntax sieht wie folgt aus:
for (let i of array) {
action
}
Lassen Sie uns diese Schleifenmethode verwenden, um ein Array inkrementell zu durchlaufen, um zu sehen, wie es funktioniert:
let anArray = [1, 3, 5, 6];
for (let i of anArray) {
console.log(i)
}
Output:
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 for…in :
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log(anArray[v])
v -=1;
}
Output:
6
5
3
1
Um innerhalb der Schleife zu arbeiten:
let anArray = [1, 3, 5, 6];
let v = anArray.length - 1;
for (let x of anArray) {
console.log("5", "x", anArray[v], "=", anArray[v] * 5)
v -=1;
}
Output:
5 x 6 = 30
5 x 5 = 25
5 x 3 = 15
5 x 1 = 5
Die While-Schleife
Die while- 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:
let i = 0;
while (i < 10) {
console.log(4)
}Der obige Code protokolliert "4" unendlich.
Lassen Sie uns mit der while- Schleife ein Array durchlaufen:
let i = 0;
while (i < anArray.length) {
console.log(anArray[i])
i +=1
}
Output:
1
3
5
6
JavaScript do…während Loop
Die do…while- Schleife akzeptiert und führt eine Reihe von Aktionen explizit innerhalb einer do- Syntax aus. Es gibt dann die Bedingung für diese Aktion innerhalb der while- Schleife an.
So sieht es aus:
do{
actions
}
while (
consition
)Lassen Sie uns nun mit dieser Schleifenmethode durch ein Array iterieren:
do{
console.log(anArray[i])
i +=1
}
while (
i < anArray.length
)
Output:
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. Allerdings funktionieren die meisten dieser JavaScript-Schleifen 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.