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 Block-Anweisung verwenden, um mehrere Anweisungen auszuführen.

Wie andere 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;
}

Bei jeder Iteration erhöht die Schleife n und addiert es zu x. Daher nehmen x und n folgende 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 länger wahr, sodass die Schleife endet.

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

Betrachten Sie das folgende Beispiel, das über die Kommentare eines Dokuments iteriert und diese 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 durchgehend ein Beispiel für gute Praxis, aufgrund der folgenden Zeile speziell:

while (currentNode = iterator.nextNode()) {

Die Wirkung dieser Zeile ist in Ordnung — insofern als jedes Mal, wenn ein Kommentar-Knoten gefunden wird:

1. iterator.nextNode() gibt diesen Kommentar-Knoten zurück, der currentNode zugewiesen wird.
2. Der Wert von currentNode = iterator.nextNode() ist daher wahrheitsgemäß.
3. Also wird der console.log()-Aufruf ausgeführt und die Schleife geht weiter.

…und dann, wenn es keine Kommentar-Knoten mehr im Dokument gibt:

1. iterator.nextNode() gibt null zurück.
2. Der Wert von currentNode = iterator.nextNode() ist daher ebenfalls null, was falsch 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 — stattdessen ist es ein Zuweisungsoperator. Deshalb sieht das = so aus, als wäre es ein Tippfehler für === — obwohl es nicht tatsächlich ein Tippfehler ist.

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

Eine bedingte Ausdruck wurde erwartet, stattdessen wurde eine Zuweisung gesehen.

Viele Stilrichtlinien empfehlen, die Absicht, dass die Bedingung eine Zuweisung sein soll, deutlicher zu machen. 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 von der Standardkonfiguration von ESLints no-cond-assign sowie von Prettier erzwungen wird, sodass Sie dieses Muster wahrscheinlich häufig in der freien Wildbahn sehen werden.

Einige Personen könnten außerdem empfehlen, 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, auf die Idee, eine while-Schleife ganz zu verzichten:

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 mit dem Muster der Zuweisung als Bedingung ausreichend vertraut ist, sollten all diese Variationen eine gleichwertige Lesbarkeit haben. Ansonsten ist die letzte Form wahrscheinlich die lesbarste, wenn auch die ausführlichste.

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