while

Инструкция while создает цикл, который выполняет указанную инструкцию до тех пор, пока условие истинно. Условие проверяется перед выполнением инструкции.

Попробуйте

let n = 0;

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

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

Синтаксис

while (condition)
  statement

condition

Выражение, вычисляемое перед каждой итерацией цикла. Если это условие вычисляется как истинное, выполняется statement. Когда условие вычисляется как ложное, выполнение продолжается с инструкции после цикла while.

statement

Инструкция, которая выполняется до тех пор, пока условие истинно. Вы можете использовать блочную инструкцию для выполнения нескольких инструкций.

Описание

Как и другие циклы, вы можете использовать операторы управления потоком внутри statement:

• break останавливает выполнение statement и переходит к первой инструкции после цикла.
• continue останавливает выполнение statement и повторно вычисляет condition.

Примеры

Использование while

Следующий цикл while итерирует, пока n меньше трех.

let n = 0;
let x = 0;

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

Каждую итерацию цикл увеличивает n и добавляет его к x. Следовательно, x и n принимают следующие значения:

• После первой итерации: n = 1 и x = 1
• После второй итерации: n = 2 и x = 3
• После третьей итерации: n = 3 и x = 6

После завершения третьей итерации условие n < 3 больше не истинно, поэтому цикл завершается.

Использование присваивания в качестве условия

В некоторых случаях может иметь смысл использовать присваивание в качестве условия. Это связано с компромиссами в читаемости, поэтому существуют определенные стилистические рекомендации, которые сделают шаблон более очевидным для всех.

Рассмотрим следующий пример, который итерирует по комментариям документа, регистрируя их в консоли.

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

Это не совсем хороший пример использования, из-за следующей строки:

while (currentNode = iterator.nextNode()) {

Эффект этой строки нормальный — в том, что каждый раз, когда находится узел комментария:

1. iterator.nextNode() возвращает этот узел комментария, который присваивается currentNode.
2. Значение currentNode = iterator.nextNode(), следовательно, истинное.
3. Таким образом, вызывается console.log(), и цикл продолжается.

… а затем, когда в документе больше нет узлов комментариев:

1. iterator.nextNode() возвращает null.
2. Значение currentNode = iterator.nextNode(), следовательно, также является null, что является ложным.
3. Таким образом, цикл завершается.

Проблема с этой строкой заключается в том, что условия обычно используют операторы сравнения, такие как ===, но = в этой строке не является оператором сравнения — это оператор присваивания. Таким образом, этот = выглядит как опечатка в === — хотя на самом деле это не опечатка.

Поэтому в таких случаях некоторые инструменты линтинга кода, такие как правило ESLint no-cond-assign — чтобы помочь вам обнаружить возможную опечатку и исправить ее — сообщат предупреждение, подобное следующему:

Ожидалось условное выражение, а вместо этого обнаружено присваивание.

Многие руководства по стилю рекомендуют более явно указывать намерение, чтобы условие было присваиванием. Вы можете сделать это минимально, добавив дополнительные скобки в качестве оператора группировки вокруг присваивания:

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

На самом деле, именно такой стиль навязывается конфигурацией ESLint по умолчанию no-cond-assign, а также Prettier, поэтому вы, вероятно, увидите этот шаблон часто.

Некоторые люди могут также рекомендовать добавить оператор сравнения, чтобы превратить условие в явное сравнение:

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

Существуют и другие способы написания этого шаблона, например:

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

Или, отказавшись от идеи использования цикла while:

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

Если читатель достаточно знаком с шаблоном присваивания в качестве условия, все эти вариации должны иметь одинаковую читаемость. В противном случае последняя форма, вероятно, наиболее читаема, хотя и наиболее многословна.

Спецификации

Совместимость с браузерами

См. также

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