JavaScript für Schleife
Beispiel
Wiederholen Sie einen Codeblock fünfmal:
for (let i = 0; i < 5; i++) {
text += i + "<br>";
}
Ein Array in einer Schleife (durchlaufen) lassen, um Autonamen zu sammeln:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
- Die Schleife beginnt an Position 0 (
let i = 0). - Die Schleife erhöht sich automatisch
ifür jeden Durchlauf. - Die Schleife läuft solange
i < cars.length.
Weitere Beispiele unten.
Definition und Verwendung
Die forAnweisung definiert einen Codeblock, der ausgeführt wird, solange eine Bedingung ist
true.
Notiz
Wenn Sie Anweisung 2 weglassen, müssen Sie innerhalb der Schleife einen Break angeben.
Sonst endet die Schleife nie. Dies wird Ihren Browser zum Absturz bringen.Siehe auch:
Syntax
for (statement 1; statement 2; statement 3) {
code block to be executed
}
Parameter
| Parameter | Description |
| statement 1 | Optional. Executed before the code block starts. Normally used to initialize a counter variable. To initiate multiple values, separate each value with a comma. This parameter can be omitted, but not the semicolon ";" |
| statement 2 | Optional. The condition for running the code block. If it returns true the loop will start over again, otherwise the loop will end.This parameter can be omitted, but not the semicolon ";" |
| statement 3 | Optional. Executed after the code block. Normally used to increment the counter variable. This parameter can be omitted (e.g. to increase/decrease values inside the loop) |
JavaScript-Schleifenanweisungen
| Erklärung | Beschreibung | |
| brechen | Bricht aus einer Schleife aus | |
| Fortfahren | Überspringt einen Wert in einer Schleife | |
| während | Schleift einen Codeblock, während eine Bedingung wahr ist | |
| tun ... während | Schleift einen Codeblock einmal und dann solange eine Bedingung wahr ist | |
| Pro | Schleift einen Codeblock, während eine Bedingung wahr ist | |
| für ... von | Schleift die Werte aller Iterablen | |
| für in | Schleift die Eigenschaften eines Objekts |
Mehr Beispiele
Initiieren Sie mehrere Werte im ersten Parameter:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Lassen Sie die ersten Parameter weg (setzen Sie die Werte, bevor die Schleife beginnt):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Verwenden continue- Durchlaufen Sie einen Codeblock, aber überspringen Sie den Wert 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) continue;
text += i + "<br>";
}
Verwenden break- Schleife einen Codeblock, aber verlasse die Schleife, wenn i == 3:
let text = "";
for (let i = 0; i < 5; i++) {
if (i == 3) break;
text += i + "<br>";
}
Lassen Sie den zweiten Parameter weg.
Verwenden Sie break, um die Schleife zu verlassen, andernfalls endet die Schleife nie und Ihr Browser stürzt ab:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = 0; ; i++) {
if (i == cars-length) break;
text += cars[i] + "<br>";
}
Schleife über ein Array in absteigender Reihenfolge (negatives Inkrement):
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let text = "";
for (let i = cars.length - 1; i >= 0; i--) {
text += cars[i] + "<br>";
}
Lassen Sie den letzten Parameter weg und erhöhen Sie die Werte innerhalb der Schleife:
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
for (; i < len;) {
text += cars[i] + "<br>";
i++;
}
Schleifen Sie eine NodeList und ändern Sie die Farbe aller p-Elemente in der Liste:
const myNodelist = document.getElementsByTagName("P");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "blue";
}
Eine verschachtelte Schleife (eine Schleife in einer Schleife):
let text = "";
for (let = 0; i < 3; i++) {
text += i + "<br>";
for (let j = 10; j < 15; j++) {
text += j + "<br>";
}
}
Browser-Unterstützung
forist eine ECMAScript1 (ES1)-Funktion.
ES1 (JavaScript 1997) wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |