while

while (condition)
  statement

condition

Ein Ausdruck, der vor jedem Durchlauf der Schleife ausgewertet wird. Wenn diese Bedingung als wahr ausgewertet wird, wird statement ausgeführt. Wenn die Bedingung als falsch ausgewertet wird, wird die Ausführung mit der Anweisung nach der while-Schleife fortgesetzt.

statement

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

Wie bei anderen Schleifenanweisungen können Sie Kontrollflussanweisungen innerhalb von statement verwenden:

• break stoppt die Ausführung von statement und geht zur ersten Anweisung nach der Schleife.
• continue stoppt die Ausführung von statement und wertet die condition erneut aus.

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

let n = 0;
let x = 0;

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

Jede Iteration erhöht die Schleife n und addiert es zu x. Daher nehmen x und n die folgenden Werte an:

• 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, so dass die Schleife beendet wird.

In einigen Fällen kann es sinnvoll sein, eine Zuweisung als Bedingung zu verwenden. Dies geht mit einem Kompromiss hinsichtlich der Lesbarkeit einher, weshalb es bestimmte stilistische Empfehlungen gibt, die das Muster für jeden offensichtlicher 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());
}

Das ist nicht ganz ein Beispiel für gute 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 zurück, der currentNode zugewiesen wird.
2. Der Wert von currentNode = iterator.nextNode() ist daher wahrhaftig.
3. Also wird der console.log()-Aufruf ausgeführt und die Schleife wird fortgesetzt.

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

1. iterator.nextNode() gibt null zurück.
2. Der Wert von currentNode = iterator.nextNode() ist daher ebenfalls null, was falschhaft ist.
3. Also endet die Schleife.

Das Problem mit dieser Zeile ist: Bedingungen verwenden typischerweise Vergleichsoperatoren wie ===, aber das = in dieser Zeile ist kein Vergleichsoperator — es ist stattdessen ein Zuweisungsoperator. Daher sieht dieses = so aus, als wäre es ein Tippfehler für === — obwohl es tatsächlich kein Tippfehler ist.

Daher werden in solchen Fällen einige Code-Linting-Tools wie die no-cond-assign-Regel von ESLint — um Ihnen zu helfen, einen möglichen Tippfehler zu erkennen, damit Sie ihn korrigieren können — eine Warnung wie die folgende melden:

Erwartet wurde ein bedingter Ausdruck und stattdessen wurde eine Zuweisung gesehen.

Viele Stilrichtlinien empfehlen, die Absicht, dass die Bedingung eine Zuweisung sein soll, expliziter anzugeben. Sie können dies minimal erreichen, indem Sie zusätzliche 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());
}

Tatsächlich ist dies der Stil, der durch die Standardkonfiguration von ESLints no-cond-assign durchgesetzt wird, sowie von Prettier, sodass Sie dieses Muster wahrscheinlich häufig in freier Wildbahn sehen werden.

Einige Leute empfehlen möglicherweise zusätzlich, 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 das Konzept der Verwendung einer while-Schleife ganz zu verwerfen:

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

Wenn der Leser ausreichend mit dem Muster der Zuweisung als Bedingung vertraut ist, sollten alle diese Variationen eine gleichwertige Lesbarkeit haben. Andernfalls ist die letzte Form wahrscheinlich die am besten lesbare, wenn auch die ausführlichste.

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