Schleifen können einen Codeblock mehrmals ausführen.
Schleifen sind praktisch, wenn Sie denselben Code immer wieder ausführen möchten Zeit mit einem anderen Wert.
Dies ist häufig bei der Arbeit mit Arrays der Fall:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript unterstützt verschiedene Arten von Schleifen:
for
- durchläuft einen Codeblock mehrmals
for/in
- durchläuft die Eigenschaften eines Objekts
for/of
- durchläuft die Werte von an iterierbares Objekt
while
- durchläuft einen Codeblock, während eine angegebene Bedingung wahr ist
do/while
- durchläuft auch einen Codeblock, während eine angegebene Bedingung wahr ist
for
-SchleifeDie for
-Anweisung erstellt eine Schleife mit drei optionalen Ausdrücken:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}
Ausdruck 1 wird (einmal) vor der Ausführung des Codeblocks ausgeführt.
Ausdruck 2 definiert die Bedingung für die Ausführung des Codeblocks.
Ausdruck 3 wird (jedes Mal) ausgeführt, nachdem der Codeblock ausgeführt wurde.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Aus dem obigen Beispiel können Sie Folgendes ablesen:
Ausdruck 1 legt eine Variable fest, bevor die Schleife beginnt (es sei i=0).
Ausdruck 2 definiert die Bedingung für die Ausführung der Schleife (i muss kleiner sein als 5).
Ausdruck 3 erhöht jedes Mal einen Wert (i++), wenn der Codeblock in der Schleife vorhanden ist hingerichtet worden.
Normalerweise verwenden Sie Ausdruck 1, um die in der Schleife verwendete Variable zu initialisieren (es sei i=0).
Dies ist nicht immer der Fall. JavaScript ist das egal. Ausdruck 1 ist Optional.
Sie können in Ausdruck 1 viele Werte initiieren (durch Komma getrennt):
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Und Sie können Ausdruck 1 weglassen (z. B. wenn Ihre Werte festgelegt sind). bevor die Schleife beginnt):
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Oft wird Ausdruck 2 verwendet, um den Zustand der Anfangsvariablen auszuwerten.
Dies ist nicht immer der Fall. JavaScript ist das egal. Ausdruck 2 ist auch optional.
Wenn Ausdruck 2 „true“ zurückgibt, beginnt die Schleife von vorne. Wenn es false zurückgibt, wird die Die Schleife endet.
Wenn Sie Ausdruck 2 weglassen, müssen Sie einen break innerhalb des Ausdrucks angeben Schleife. Sonst endet die Schleife nie. Dies führt zum Absturz Ihres Browsers. Lesen Sie mehr über Pausen in einem späteren Kapitel dieses Tutorials.
Oftmals erhöht Ausdruck 3 den Wert der Anfangsvariablen.
Dies ist nicht immer der Fall. JavaScript ist das egal. Ausdruck 3 ist Optional.
Ausdruck 3 kann so etwas wie ein negatives Inkrement (i--) oder ein positives Ergebnis bewirken Inkrement (i=i + 15) oder irgendetwas anderes.
Ausdruck 3 kann auch weggelassen werden (z. B. wenn Sie Ihre Werte innerhalb der Schleife erhöhen):
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Verwendung von var
in einer Schleife:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
Verwendung von let
in einer Schleife:
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
Im ersten Beispiel wird var
verwendet, die in deklarierte Variable Die Schleife deklariert die Variable außerhalb der Schleife neu.
Im zweiten Beispiel wird mit let
die in deklarierte Variable verwendet Die Schleife deklariert die Variable außerhalb der Schleife nicht erneut.
Wenn let
verwendet wird, um die i-Variable in einer Schleife zu deklarieren, wird die i-Variable verwendet Die Variable ist nur innerhalb der Schleife sichtbar.
For/Of
- und For/In
-SchleifenDie for/in
-Schleife und die for/of
-Schleife werden im nächsten Kapitel erläutert.
while
SchleifenDie while
-Schleife und der do/while
werden in den nächsten Kapiteln erläutert.