Einefor Schleife wiederholt, bis eine bestimmte Bedingung als falsch ausgewertet wird. Die JavaScriptfor-Schleife ist der Java- und C-for-Schleife ähnlich.

Einefor-Anweisung sieht wie folgt aus:

for (initialization; condition; afterthought)  statement

Wenn einefor-Schleife ausgeführt wird, geschieht Folgendes:

1. Der Initialisierungsausdruckinitialization, falls vorhanden, wird ausgeführt. Dieser Ausdruck initialisiert normalerweise einen oder mehrere Schleifenzähler, aber die Syntax erlaubt einen Ausdruck beliebiger Komplexität. Dieser Ausdruck kann auch Variablen deklarieren.
2. Der Ausdruckcondition wird ausgewertet. Wenn der Wert voncondition wahr ist, wird die Schleifenanweisung ausgeführt. Andernfalls wird diefor-Schleife beendet. (Wenn der Ausdruckcondition vollständig weggelassen wird, wird die Bedingung als wahr angenommen.)
3. Diestatement-Anweisung wird ausgeführt. Um mehrere Anweisungen auszuführen, verwenden Sie eineblock statement ({ }), um diese Anweisungen zu gruppieren.
4. Falls vorhanden, wird der Aktualisierungsausdruckafterthought ausgeführt.
5. Die Steuerung kehrt zu Schritt 2 zurück.

Im folgenden Beispiel enthält die Funktion einefor-Anweisung, die die Anzahl der ausgewählten Optionen in einer Bildlaufleiste (ein<select> Element, das Mehrfachauswahlen ermöglicht) zählt.

HTML

<form name="selectForm">  <label for="musicTypes"    >Choose some music types, then click the button below:</label  >  <select name="musicTypes" multiple>    <option selected>R&B</option>    <option>Jazz</option>    <option>Blues</option>    <option>New Age</option>    <option>Classical</option>    <option>Opera</option>  </select>  <button type="button">How many are selected?</button></form>

JavaScript

Hier deklariert diefor-Anweisung die Variablei und initialisiert sie mit0. Sie überprüft, obi kleiner ist als die Anzahl der Optionen im<select>-Element, führt die nachfolgendeif-Anweisung aus und erhöhti nach jedem Durchlauf der Schleife um 1.

function countSelected(selectObject) {  let numberSelected = 0;  for (let i = 0; i < selectObject.options.length; i++) {    if (selectObject.options[i].selected) {      numberSelected++;    }  }  return numberSelected;}const btn = document.getElementById("btn");btn.addEventListener("click", () => {  const musicTypes = document.selectForm.musicTypes;  console.log(`You have selected ${countSelected(musicTypes)} option(s).`);});

Diedo...while Anweisung wiederholt, bis eine bestimmte Bedingung als falsch ausgewertet wird.

Einedo...while-Anweisung sieht wie folgt aus:

do  statementwhile (condition);

statement wird immer einmal ausgeführt, bevor die Bedingung geprüft wird. (Um mehrere Anweisungen auszuführen, verwenden Sie eine Blockanweisung ({ }), um diese Anweisungen zu gruppieren.)

Wennconditiontrue ist, wird die Anweisung erneut ausgeführt. Am Ende jeder Ausführung wird die Bedingung überprüft. Wenn die Bedingungfalse ist, stoppt die Ausführung und die Steuerung wird an die erste Anweisung nachdo...while übergeben.

Im folgenden Beispiel iteriert diedo-Schleife mindestens einmal und wiederholt sich, bisi nicht mehr kleiner als5 ist.

let i = 0;do {  i += 1;  console.log(i);} while (i < 5);

Einewhile-Anweisung führt ihre Anweisungen aus, solange eine bestimmte Bedingung alstrue ausgewertet wird. Einewhile-Anweisung sieht wie folgt aus:

while (condition)  statement

Wenn dieconditionfalse wird, hört die Anweisung innerhalb der Schleife auf, ausgeführt zu werden, und die Steuerung wird an die Anweisung nach der Schleife übergeben.

Der Bedingungstest erfolgtvor der Ausführung derstatement in der Schleife. Wenn die Bedingungtrue zurückgibt, wirdstatement ausgeführt und die Bedingung erneut getestet. Wenn die Bedingungfalse zurückgibt, stoppt die Ausführung und die Steuerung wird an die Anweisung nach derwhile-Anweisung übergeben.

Um mehrere Anweisungen auszuführen, verwenden Sie eine Blockanweisung ({ }), um diese Anweisungen zu gruppieren.

Die folgendewhile-Schleife iteriert, solangen kleiner als3 ist:

let n = 0;let x = 0;while (n < 3) {  n++;  x += n;}

Mit jeder Iteration erhöht die Schleifen und addiert diesen Wert zux. Daher nehmenx undn die folgenden Werte an:

• Nach dem ersten Durchlauf:n =1 undx =1
• Nach dem zweiten Durchlauf:n =2 undx =3
• Nach dem dritten Durchlauf:n =3 undx =6

Nachdem der dritte Durchlauf abgeschlossen ist, ist die Bedingungn < 3 nicht mehrtrue, und die Schleife wird beendet.

Vermeiden Sie Endlosschleifen. Stellen Sie sicher, dass die Bedingung in einer Schleife schließlichfalse wird — andernfalls wird die Schleife nie beendet! Die Anweisungen in der folgendenwhile-Schleife werden für immer ausgeführt, weil die Bedingung niefalse wird:

// Infinite loops are bad!while (true) {  console.log("Hello, world!");}

Einlabel versieht eine Anweisung mit einem Bezeichner, mit dem Sie an anderer Stelle in Ihrem Programm darauf verweisen können. Zum Beispiel können Sie ein Label verwenden, um eine Schleife zu kennzeichnen, und dann diebreak- odercontinue-Anweisungen verwenden, um anzuzeigen, ob ein Programm die Schleife unterbrechen oder mit ihrer Ausführung fortfahren soll.

Die Syntax der labeled-Anweisung sieht wie folgt aus:

label:  statement

Der Wert vonlabel kann ein beliebiger JavaScript-Bezeichner sein, der kein reserviertes Wort ist. Diestatement, die Sie mit einem Label kennzeichnen, kann eine beliebige Anweisung sein. Beispiele zur Verwendung von Labeled-Anweisungen finden Sie in den Beispielen weiter unten zubreak undcontinue.

Verwenden Sie diebreak-Anweisung, um einewhile-,do-while-,for- oderswitch-Schleife oder eine in Verbindung mit einer labeled-Anweisung zu beenden.

• Wenn Siebreak ohne Label verwenden, beendet es die innerste umschließendewhile-,do-while-,for- oderswitch-Schleife sofort und überträgt die Steuerung an die folgende Anweisung.
• Wenn Siebreak mit einem Label verwenden, beendet es die angegebene labeled-Anweisung.

Die Syntax derbreak-Anweisung sieht so aus:

break;break label;

1. Die erste Form der Syntax beendet die innerste umschließende Schleife oder denswitch.
2. Die zweite Form der Syntax beendet die angegebene umschließende labeled-Anweisung.

Das folgende Beispiel iteriert durch die Elemente in einem Array, bis der Index eines Elements gefunden ist, dessen WerttheValue ist:

for (let i = 0; i < a.length; i++) {  if (a[i] === theValue) {    break;  }}

Diecontinue-Anweisung kann verwendet werden, um einenwhile-,do-while-,for- oderlabel-Anweisung erneut zu starten.

• Wenn Siecontinue ohne Label verwenden, beendet es die aktuelle Iteration der innersten umschließendenwhile-,do-while- oderfor-Anweisung und setzt die Ausführung der Schleife mit der nächsten Iteration fort. Im Gegensatz zurbreak-Anweisung beendetcontinue nicht die Ausführung der Schleife ganz. In einerwhile-Schleife springt es zurück zur Bedingung. In einerfor-Schleife springt es zumincrement-expression.
• Wenn Siecontinue mit einem Label verwenden, bezieht es sich auf die Schleifenanweisung, die mit diesem Label identifiziert wurde.

Die Syntax dercontinue-Anweisung sieht wie folgt aus:

continue;continue label;

Das folgende Beispiel zeigt einewhile-Schleife mit einercontinue-Anweisung, die ausgeführt wird, wenn der Wert voni3 ist. Somit nimmtn die Werte1,3,7 und12 an.

let i = 0;let n = 0;while (i < 5) {  i++;  if (i === 3) {    continue;  }  n += i;  console.log(n);}// Logs:// 1 3 7 12

Wenn Sie dascontinue; auskommentieren, würde die Schleife bis zum Ende laufen und Sie würden1,3,6,10,15 sehen.

Eine Anweisung mit dem LabelcheckIandJ enthält eine mit dem LabelcheckJ. Wenncontinue aufgerufen wird, beendet das Programm die aktuelle Iteration voncheckJ und beginnt die nächste Iteration. Jedes Mal, wenncontinue aufgerufen wird, wirdcheckJ weiter iteriert, bis seine Bedingungfalse zurückgibt. Wennfalse zurückgegeben wird, wird der Rest dercheckIandJ-Anweisung abgeschlossen, undcheckIandJ iteriert erneut, bis seine Bedingungfalse zurückgibt. Wennfalse zurückgegeben wird, fährt das Programm mit der Anweisung hintercheckIandJ fort.

Wenncontinue ein Label voncheckIandJ hätte, würde das Programm am Anfang dercheckIandJ-Anweisung fortsetzen.

let i = 0;let j = 10;checkIandJ: while (i < 4) {  console.log(i);  i += 1;  checkJ: while (j > 4) {    console.log(j);    j -= 1;    if (j % 2 === 0) {      continue;    }    console.log(j, "is odd.");  }  console.log("i =", i);  console.log("j =", j);}

Diefor...in-Anweisung iteriert eine angegebene Variable über alle aufzählbaren Eigenschaften eines Objekts. Für jede eindeutige Eigenschaft führt JavaScript die angegebenen Anweisungen aus. Einefor...in-Anweisung sieht wie folgt aus:

for (variable in object)  statement

Die folgende Funktion nimmt ein Objekt und den Namen des Objekts als Argument. Sie durchläuft alle Eigenschaften des Objekts und gibt einen String zurück, der die Eigenschaftsnamen und ihre Werte auflistet.

function dumpProps(obj, objName) {  let result = "";  for (const i in obj) {    result += `${objName}.${i} = ${obj[i]}<br>`;  }  result += "<hr>";  return result;}

Für ein Objektcar mit den Eigenschaftenmake undmodel, würderesult folgendermaßen aussehen:

car.make = Fordcar.model = Mustang

Auch wenn es verlockend sein mag, dies als Möglichkeit zu verwenden, um überArray-Elemente zu iterieren, gibt diefor...in-Anweisung die Namen Ihrer benutzerdefinierten Eigenschaften zusätzlich zu den numerischen Indizes zurück.

Daher ist es besser, eine traditionellefor-Schleife mit einem numerischen Index zu verwenden, wenn über Arrays iteriert wird, da diefor...in-Anweisung zusätzlich zu den Array-Elementen auch über benutzerdefinierte Eigenschaften iteriert, falls Sie das Array-Objekt ändern (z. B. durch Hinzufügen benutzerdefinierter Eigenschaften oder Methoden).

Diefor...of-Anweisung erstellt eine Schleife überiterierbare Objekte (einschließlichArray,Map,Set,arguments-Objekt und so weiter) und ruft einen benutzerdefinierten Iterationshook mit Anweisungen auf, die für den Wert jeder eindeutigen Eigenschaft ausgeführt werden sollen.

for (variable of iterable)  statement

Das folgende Beispiel zeigt den Unterschied zwischen einerfor...of-Schleife und einerfor...in-Schleife. Währendfor...in über Eigenschaftsnamen iteriert, iteriertfor...of über Eigenschaftswerte:

const arr = [3, 5, 7];arr.foo = "hello";for (const i in arr) {  console.log(i);}// "0" "1" "2" "foo"for (const i of arr) {  console.log(i);}// Logs: 3 5 7

Diefor...of- undfor...in-Anweisungen können auch mitDestructuring verwendet werden. Zum Beispiel können Sie gleichzeitig über die Schlüssel und Werte eines Objekts mitObject.entries() iterieren.

const obj = { foo: 1, bar: 2 };for (const [key, val] of Object.entries(obj)) {  console.log(key, val);}// "foo" 1// "bar" 2

• Zurück
• Weiter