while
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die while
-Anweisung erstellt eine Schleife, die eine spezifizierte Anweisung ausführt, solange die Testbedingung als wahr ausgewertet 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, 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 derwhile
-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.
Beschreibung
Wie bei anderen Schleifenanweisungen können Sie Kontrollflussanweisungen innerhalb von statement
verwenden:
Beispiele
Verwendung von while
Die folgende while
-Schleife wird wiederholt ausgeführt, 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
. Somit nehmen x
und n
die folgenden Werte an:
- Nach dem ersten Durchgang:
n
= 1 undx
= 1 - Nach dem zweiten Durchgang:
n
= 2 undx
= 3 - Nach dem dritten Durchgang:
n
= 3 undx
= 6
Nachdem der dritte Durchgang abgeschlossen ist, ist die Bedingung n
< 3 nicht mehr erfüllt, und die Schleife endet.
Verwendung einer Zuweisung als Bedingung
In einigen Fällen kann es sinnvoll sein, eine Zuweisung als Bedingung zu verwenden. Dies geht jedoch zulasten der Lesbarkeit, sodass es bestimmte stilistische Empfehlungen gibt, um das Muster für alle offensichtlicher zu machen.
Betrachten Sie das folgende Beispiel, das über die Kommentare eines Dokuments iteriert und sie im Konsolenprotokoll ausgibt.
const iterator = document.createNodeIterator(document, NodeFilter.SHOW_COMMENT);
let currentNode;
while (currentNode = iterator.nextNode()) {
console.log(currentNode.textContent.trim());
}
Dies ist kein vollständig gutes Praxisbeispiel, insbesondere wegen der folgenden Zeile:
while (currentNode = iterator.nextNode()) {
Die Wirkung dieser Zeile ist soweit in Ordnung — in dem Sinne, dass jedes Mal, wenn ein Kommentarknoten gefunden wird:
iterator.nextNode()
gibt diesen Kommentarknoten zurück, welchercurrentNode
zugewiesen wird.- Der Wert von
currentNode = iterator.nextNode()
ist daher wahrheitsgemäß. - Somit wird der
console.log()
-Aufruf ausgeführt, und die Schleife geht weiter.
…und wenn es keine weiteren Kommentarknoten im Dokument gibt:
iterator.nextNode()
gibtnull
zurück.- Der Wert von
currentNode = iterator.nextNode()
ist daher auchnull
, was falschgemäß ist. - Die Schleife endet also.
Das Problem bei dieser Zeile ist: Bedingungen verwenden typischerweise Vergleichsoperatoren wie ===
, aber das =
in dieser Zeile ist kein Vergleichsoperator — stattdessen ist es ein Zuweisungsoperator. Dadurch sieht dieses =
aus wie ein Tippfehler für ===
— obwohl es kein Tippfehler ist.
Daher melden einige Code-Linting-Tools, wie beispielsweise die no-cond-assign
-Regel von ESLint, als Unterstützung, um mögliche Tippfehler zu erkennen, eine Warnung wie die folgende:
Expected a conditional expression and instead saw an assignment.
Viele Stilrichtlinien empfehlen, die Absicht für die Bedingung, eine Zuweisung zu sein, deutlicher zu machen. Dies können Sie minimal durch zusätzliche Klammern als Gruppenoperator um die Zuweisung erreichen:
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 der no-cond-assign
-Regel von ESLint sowie Prettier durchgesetzt, sodass Sie dieses Muster wahrscheinlich häufig in freier Wildbahn sehen werden.
Manche empfehlen 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:
while ((currentNode = iterator.nextNode()) && currentNode) {
Oder indem man ganz auf die Idee verzichtet, 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:innen mit dem Muster "Zuweisung als Bedingung" ausreichend vertraut sind, sollten alle diese Varianten eine vergleichbare Lesbarkeit aufweisen. Andernfalls ist die letzte Form vermutlich die am einfachsten zu lesende, wenngleich die umfangreichste.
Spezifikationen
Specification |
---|
ECMAScript® 2025 Language Specification # sec-while-statement |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | server | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
while |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support