while

Probieren Sie es aus

let n = 0;

while (n < 3) {
  n++;
}

console.log(n);
// Expected output: 3

Syntax

while (condition)
  statement

condition

Ein Ausdruck, der vor jedem Durchlauf der Schleife ausgewertet wird. Wenn diese Bedingung als wahr bewertet wird, wird statement ausgefhrt. Wenn die Bedingung als falsch bewertet wird, wird die Ausfhrung mit der Anweisung nach der while-Schleife fortgesetzt.

statement

Eine Anweisung, die ausgefhrt wird, solange die Bedingung als wahr bewertet wird. Sie knnen eine Blockanweisung verwenden, um mehrere Anweisungen auszufhren.

Beschreibung

Wie bei anderen Schleifenanweisungen knnen Sie Kontrollflussanweisungen innerhalb von statement verwenden:

• break stoppt die Ausfhrung von statement und fhrt mit der ersten Anweisung nach der Schleife fort.
• continue stoppt die Ausfhrung von statement und wertet condition neu aus.

Beispiele

Verwendung von while

Die folgende while-Schleife iteriert, solange n kleiner als drei ist.

let n = 0;
let x = 0;

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

Bei jeder Iteration erhht die Schleife n und addiert es zu x. Daher haben x und n die folgenden Werte:

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

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

Verwenden einer Zuweisung als Bedingung

In einigen Fllen 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 fr 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 durchgngiges Beispiel fr bewhrte Praktiken, insbesondere wegen der folgenden Zeile:

while (currentNode = iterator.nextNode()) {

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

1. iterator.nextNode() gibt diesen Kommentarknoten zurck, der currentNode zugewiesen wird.
2. Der Wert von currentNode = iterator.nextNode() ist daher wahrheitsgem.
3. Somit wird der console.log()-Aufruf ausgefhrt, und die Schleife wird fortgesetzt.

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

1. iterator.nextNode() gibt null zurck.
2. Der Wert von currentNode = iterator.nextNode() ist daher ebenfalls null, was falsch ist.
3. Somit endet die Schleife.

Das Problem bei dieser Zeile ist: typischerweise verwenden Bedingungen Vergleichsoperatoren wie ===, aber das = in dieser Zeile ist kein Vergleichsoperator stattdessen ist es ein Zuweisungsoperator. Das = sieht so aus, als wre es ein Tippfehler fr === obwohl es kein Tippfehler ist.

Daher werden einige Code-Linting-Tools wie die ESLint-Regel no-cond-assign um Ihnen zu helfen, einen mglichen Tippfehler zu erkennen, damit Sie ihn beheben knnen eine Warnung wie die folgende melden:

Anstelle eines bedingten Ausdrucks wurde eine Zuweisung erwartet.

Viele Stilrichtlinien empfehlen, die Absicht fr die Bedingung als Zuweisung expliziter anzugeben. Sie knnen das minimal tun, indem Sie zustzliche Klammern als Gruppierungsoperator um die Zuweisung setzen:

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

Tatschlich wird dieser Stil von der Standardkonfiguration von ESLint no-cond-assign erzwungen, ebenso wie von Prettier, daher werden Sie dieses Muster wahrscheinlich oft in der freien Natur sehen.

Einige Leute empfehlen mglicherweise weiter, einen Vergleichsoperator hinzuzufgen, um die Bedingung in einen expliziten Vergleich zu verwandeln:

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

Es gibt andere Mglichkeiten, dieses Muster zu schreiben, wie zum Beispiel:

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

Oder gnzlich auf die Idee verzichten, eine while-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 ausfhrlichste.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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