JavaScript für Schleife


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Schleifen können einen Codeblock mehrmals ausführen.


JavaScript-Schleifen

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:

Anstatt zu schreiben:

 text += cars[0] + "<br>"; 
text += cars[1] + "<br>"; 
 text += cars[2] + "<br>"; 
text += cars[3] + "<br>"; 
 text += cars[4] + "<br>"; 
text += cars[5] + "<br>";

Du kannst schreiben:

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>

Verschiedene Arten von Schleifen

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


Die for-Schleife

Die 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.

Beispiel

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.



Ausdruck 1

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):

Beispiel

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):

Beispiel

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>

Ausdruck 2

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.


Ausdruck 3

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):

Beispiel

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>

Schleifenbereich

Verwendung von var in einer Schleife:

Beispiel

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:

Beispiel

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-Schleifen

Die for/in-Schleife und die for/of-Schleife werden im nächsten Kapitel erläutert.


while Schleifen

Die while-Schleife und der do/while werden in den nächsten Kapiteln erläutert.