Diewhile-Anweisung erzeugt eine Schleife, die eine bestimmte Anweisung ausführt, solange die Prüfbedingung als wahr bewertet wird. Die Bedingung wird vor der Ausführung der Anweisung ausgewertet.

Probieren Sie es aus

let n = 0;while (n < 3) {  n++;}console.log(n);// Expected output: 3

Syntax

while (condition)  statement

condition

Ein Ausdruck, dervor jedem Durchlauf der Schleife ausgewertet wird. Wenn diese Bedingungals wahr bewertet wird, wirdstatement ausgeführt. Wenn die Bedingungals falsch bewertet wird, wird die Ausführung mit der Anweisung nach derwhile-Schleife fortgesetzt.

statement

Eine Anweisung, die ausgeführt wird, solange die Bedingung als wahr bewertet wird. Sie können eineBlockanweisung verwenden, um mehrere Anweisungen auszuführen.

Beschreibung

Wie bei anderen Schleifenanweisungen können SieKontrollflussanweisungen innerhalb vonstatement verwenden:

• break stoppt die Ausführung vonstatement und fährt mit der ersten Anweisung nach der Schleife fort.
• continue stoppt die Ausführung vonstatement und wertetcondition neu aus.

Beispiele

Verwendung von while

Die folgendewhile-Schleife iteriert, solangen kleiner als drei ist.

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

Bei jeder Iteration erhöht die Schleifen und addiert es zux. Daher habenx undn die folgenden Werte:

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

Nach Abschluss des dritten Durchlaufs ist die Bedingungn < 3 nicht mehr wahr, sodass die Schleife beendet wird.

Verwenden einer Zuweisung als Bedingung

In einigen Fällen kann es sinnvoll sein, eine Zuweisung als Bedingung zu verwenden. Dies geht mit Abstrichen in der Lesbarkeit einher, daher gibt es bestimmte stilistische Empfehlungen, um das Muster für alle offensichtlicher zu machen.

Betrachten Sie das folgende Beispiel, das über die Kommentare eines Dokuments iteriert und sie in der Konsole protokolliert.

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);let currentNode;while (currentNode = iterator.nextNode()) {  console.log(currentNode.textContent.trim());}

Dies ist kein durchgängiges Beispiel für bewährte Praktiken, insbesondere wegen der folgenden Zeile:

while (currentNode = iterator.nextNode()) {

DerEffekt dieser Zeile ist in Ordnung — in dem Sinne, dass jedes Mal, wenn ein Kommentarknoten gefunden wird:

1. iterator.nextNode() gibt diesen Kommentarknoten zurück, dercurrentNode zugewiesen wird.
2. Der Wert voncurrentNode = iterator.nextNode() ist daherwahrheitsgemäß.
3. Somit wird derconsole.log()-Aufruf ausgeführt, und die Schleife wird fortgesetzt.

...und dann, wenn keine Kommentarknoten mehr im Dokument vorhanden sind:

1. iterator.nextNode() gibtnull zurück.
2. Der Wert voncurrentNode = iterator.nextNode() ist daher ebenfallsnull, wasfalsch ist.
3. Somit endet die Schleife.

Das Problem bei dieser Zeile ist: typischerweise verwenden BedingungenVergleichsoperatoren wie===, aber das= in dieser Zeile ist kein Vergleichsoperator — stattdessen ist es einZuweisungsoperator. Das=sieht so aus, als wäre es ein Tippfehler für=== — obwohl eskein Tippfehler ist.

Daher werden einigeCode-Linting-Tools wie die ESLint-Regelno-cond-assign — um Ihnen zu helfen, einen möglichen Tippfehler zu erkennen, damit Sie ihn beheben können — eine Warnung wie die folgende melden:

Anstelle eines bedingten Ausdrucks wurde eine Zuweisung erwartet.

Viele Stilrichtlinien empfehlen, die Absicht für die Bedingung als Zuweisung expliziter anzugeben. Sie können das minimal tun, indem Sie zusätzliche Klammern alsGruppierungsoperator um die Zuweisung setzen:

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);let currentNode;while ((currentNode = iterator.nextNode())) {  console.log(currentNode.textContent.trim());}

Tatsächlich wird dieser Stil von der Standardkonfiguration von ESLintno-cond-assign erzwungen, ebenso wie vonPrettier, daher werden Sie dieses Muster wahrscheinlich oft in der freien Natur sehen.

Einige Leute empfehlen möglicherweise weiter, einen Vergleichsoperator hinzuzufügen, um die Bedingung in einen expliziten Vergleich zu verwandeln:

while ((currentNode = iterator.nextNode()) !== null) {

Es gibt andere Möglichkeiten, dieses Muster zu schreiben, wie zum Beispiel:

while ((currentNode = iterator.nextNode()) && currentNode) {

Oder gänzlich auf die Idee verzichten, einewhile-Schleife zu verwenden:

const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);for (  let currentNode = iterator.nextNode();  currentNode;  currentNode = iterator.nextNode()) {  console.log(currentNode.textContent.trim());}

Wenn die Leser ausreichend mit dem Muster der Zuweisung als Bedingung vertraut sind, sollten all diese Variationen eine gleichwertige Lesbarkeit aufweisen. Andernfalls ist die letzte Form wahrscheinlich am lesbarsten, wenn auch die ausführlichste.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• do...while
• for
• break
• continue