Загрузка...

Цикл while

В for старт, условие и обновление собраны в одной шапке. Иногда вы знаете только правило «продолжай, пока это истина» — а счётчик меняется внутри самой работы. while сначала проверяет условие, выполняет тело, снова проверяет. Та же идея повтора; другая форма на странице.

Что делает while?

Пока выражение в скобках истинно, блок { } выполняется снова. В шапке нет отдельных слотов для init или обновления. Переменные готовьте до цикла и меняйте в теле, пока условие не станет ложным. Тогда цикл останавливается, и идёт следующая инструкция.

while, for и do...while одним взглядом

📊 Повседневные формы циклов

Форма Когда подходит Проверка условия
while идти, пока правило верно; обновление в теле перед каждым кругом
for старт, стоп и шаг уже ясны перед каждым кругом (шапка из трёх частей)
do...while тело должно выполниться хотя бы раз после каждого круга

Ученические while часто всё ещё на маленьком целочисленном счётчике. Разница в месте: let i = 0 до цикла, i++ (или другое изменение) внутри фигурных скобок. Если никогда не менять то, что читает условие, цикл может не закончиться.

Простой счёт с while

javascript 
let i = 0;
while (i < 5) {
console.log(i);
i++;
}

Считать через while

i начинается с 0 до цикла. Каждый круг печатает i и добавляет единицу. Вы видите 0…4 — пять кругов. Значение 5 не печатается, потому что условие сначала ложно. Без i++ в теле i навсегда останется 0.

Прочитайте один круг медленно: условие → тело (с обновлением) → снова условие. Поэтому забытое обновление — классическая ловушка бесконечного цикла с while.

Явный шаг в лог

javascript 
let n = 1;
while (n <= 3) {
console.log("step " + n);
n++;
}

Старт с 1 и ясные метки

Здесь счётчик с 1, условие n <= 3; вы видите step 1, step 2, step 3. Начинать с 0 или 1 — выбор дизайна; держите условие согласованным, как в for.

Сумма через while

javascript 
let total = 0;
let k = 1;
while (k <= 4) {
total = total + k;
k++;
}
console.log(total);

Накапливать итог

total начинается с 0. Каждый круг добавляет текущий k, затем двигает k. После 1+2+3+4 получается 10. Растущий результат живёт вне цикла; счётчик для условия — рядом.

Обратный отсчёт через while

javascript 
let left = 3;
while (left > 0) {
console.log("left=" + left);
left--;
}
console.log("done");

Считать вниз до остановки

Не каждый цикл только растёт. Этот печатает left=3, left=2, left=1, затем done. Уменьшение счётчика тоже честное обновление — любое изменение к концу цикла уместно.

do...while минимум один раз

javascript 
let x = 0;
do {
console.log("tick " + x);
x++;
} while (x < 1);
console.log("after=" + x);

do...while сначала выполняет тело

do...while выполняет тело один раз, потом проверяет условие. Даже если для обычного while условие уже было бы ложным, первый круг всё равно случится. Здесь вы видите tick 0, затем after=1. Используйте, когда история — «попробовать раз, потом при необходимости повторить».

Показать результат while на странице

Короткий счёт через while, собрать сообщение, записать на страницу.

Счёт на странице через while

html 
<!DOCTYPE html>
<html>
<head>
<title>While — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
let i = 1;
while (i <= 4) {
msg = msg + i + " ";
i++;
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>

Страница показывает count=1 2 3 4. Смените верхнюю границу, обновите страницу, прочитайте новый список. Предпочитайте for, когда трёхчастный план очевиден; предпочитайте while, когда правило остановки яснее как одно условие с обновлением в теле. Дальше — обход значений и ключей через for...of и for...in.

Попробуйте сами

  1. Напишите while, который логирует 0…4 с i < 5 и i++ в теле.
  2. Измените, чтобы логировать 1…5 с i <= 5.
  3. Сложите 1…5 в total через while и залогируйте результат.
  4. Считайте вниз от 5 до 1, затем залогируйте done.
  5. Напишите do...while, который печатает строку даже если условие сразу ложно.
  6. В HTML-демо смените только верхнюю границу, обновите, прочитайте count=.

Частые ошибки

  • Забыть обновление в теле, чтобы условие никогда не стало ложным (бесконечный цикл)
  • Ошибка на единицу: i < 5 вместо i <= 5 (или наоборот)
  • Выбрать do...while, когда реально нужны ноль кругов
  • Поставить обновление не туда или менять другую переменную
  • Длинный while, когда ясная шапка for читалась бы лучше

Кратко

  • while повторяет блок, пока условие истинно
  • Готовьте переменные до цикла; обновляйте в теле
  • Удобно для счёта, суммы и обратного отсчёта
  • do...while выполняет тело минимум раз, потом проверяет
  • Предпочитайте for при ясных старт/стоп/шаг; while — для одного текущего правила
  • Дальше: for...of и for...in — обход значений и ключей

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 24 из 25
Javascript Урок