Циклы JavaScript: освойте for, while и do-while

Введение

В этой лабораторной работе вы научитесь использовать циклы в JavaScript. Циклы — это фундаментальная концепция в программировании, позволяющая многократно выполнять блок кода. Это полезно для таких задач, как перебор списков данных или выполнение действия заданное количество раз.

Вы изучите три основных типа циклов в JavaScript:

Цикл for: Повторяет блок кода известное количество раз.
Цикл while: Повторяет блок кода до тех пор, пока указанное условие истинно.
Цикл do-while: Похож на цикл while, но выполняет блок кода как минимум один раз перед проверкой условия.

Вы также научитесь использовать оператор break для досрочного выхода из цикла.

Вся ваша работа будет проводиться в WebIDE. Вы будете писать код JavaScript в файле script.js, который уже связан в index.html. Вы можете увидеть вывод вашего кода, переключившись на вкладку Web 8080 в среде лаборатории.

Создайте цикл for с инициализатором и условием

На этом шаге вы создадите свой первый цикл for. Цикл for идеально подходит, когда вы заранее знаете, сколько раз хотите повторить действие.

Базовый синтаксис цикла for: for (инициализатор; условие; финальное выражение) { // код для выполнения }

Инициализатор: let i = 0 — пример. Он выполняется один раз в самом начале для объявления и инициализации переменной счетчика.
Условие: i < 5 — пример. Это выражение проверяется перед каждой итерацией цикла. Если оно истинно, цикл продолжается; если ложно, цикл останавливается.

Давайте создадим простой цикл, который генерирует список элементов. Откройте файл script.js в проводнике файлов слева и добавьте следующий код.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// Этот цикл for имеет инициализатор (let i = 0) и условие (i < 3)
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

В этом коде:

let i = 0 инициализирует счетчик цикла i значением 0.
i < 3 — это условие, которое поддерживает работу цикла до тех пор, пока i меньше 3.
i++ — это финальное выражение, которое увеличивает счетчик после каждой итерации (мы сосредоточимся на этом на следующем шаге).

Добавив код, сохраните файл. Затем нажмите на вкладку Web 8080, чтобы увидеть результат. Вы должны увидеть маркированный список с тремя элементами.

Веб-страница, показывающая список, сгенерированный циклом for

Используйте инкремент в цикле for для подсчета

На этом шаге вы сосредоточитесь на третьей части цикла for: финальном выражении, которое обычно используется для инкремента счетчика.

финальное выражение (например, i++) выполняется в конце каждой итерации цикла. Оно обновляет счетчик цикла, приближая его к точке, где условие станет ложным. i++ — это распространенное сокращение для i = i + 1.

Давайте изменим цикл, чтобы он считал от 1 до 5. Замените существующий код в script.js следующим:

const output = document.getElementById("output");
let htmlContent = "<h2>Подсчет от 1 до 5:</h2>";

// Финальное выражение i++ увеличивает счетчик после каждого цикла
for (let i = 1; i <= 5; i++) {
  htmlContent += `Счет: ${i}<br>`;
}

output.innerHTML = htmlContent;

Обратите внимание на изменения:

Инициализатор теперь let i = 1, поэтому мы начинаем подсчет с 1.
Условие — i <= 5, поэтому цикл выполняется до тех пор, пока i меньше или равно 5.
Выражение i++ гарантирует увеличение счетчика с каждой итерацией.

Сохраните файл и обновите вкладку Web 8080. Вы увидите, что вывод изменится на список чисел от 1 до 5.

Скриншот, показывающий вывод кода с подсчетом от 1 до 5

Реализуйте цикл while для повторения

На этом шаге вы узнаете о цикле while. Цикл while продолжает выполнять блок кода до тех пор, пока указанное условие истинно.

Синтаксис проще, чем у цикла for: while (условие) { // код для выполнения }

С циклом while вы должны обрабатывать инициализацию переменной счетчика перед циклом и ее инкремент внутри цикла. Если забыть инкрементировать счетчик, это приведет к бесконечному циклу, который может привести к сбою браузера.

Давайте перепишем предыдущий пример подсчета, используя цикл while. Замените код в script.js следующим:

const output = document.getElementById("output");
let htmlContent = "<h2>Подсчет с помощью цикла while:</h2>";

let i = 1; // 1. Инициализатор
while (i <= 5) {
  // 2. Условие
  htmlContent += `Счет: ${i}<br>`;
  i++; // 3. Инкремент
}

output.innerHTML = htmlContent;

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

Сохраните файл и проверьте вкладку Web 8080. Вывод должен быть идентичен предыдущему шагу, демонстрируя другой способ достижения того же повторения.

Добавьте цикл do-while для как минимум одного выполнения

На этом шаге вы изучите цикл do-while. Этот цикл является вариантом цикла while с одним ключевым отличием: цикл do-while всегда выполняет свой блок кода как минимум один раз, прежде чем проверить условие.

Синтаксис выглядит так: do { // код для выполнения } while (условие);

Это полезно, когда вам нужно сначала выполнить действие, а затем решить, следует ли его повторять. Давайте посмотрим на это в действии на примере, где условие изначально ложно.

Замените код в script.js следующим:

const output = document.getElementById("output");
let htmlContent = "<h2>Тестирование цикла do-while:</h2>";

let i = 10; // Начинаем со значения, которое делает условие while ложным

// Этот цикл выполнится один раз, даже если i не меньше 5
do {
  htmlContent += `Значение i: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

В этом примере условие i < 5 изначально ложно, потому что i равно 10. Однако, поскольку это цикл do-while, код внутри блока do выполняется один раз перед проверкой условия.

Сохраните файл и посмотрите на вкладку Web 8080. Вы увидите сообщение "Значение i: 10", что доказывает, что цикл выполнился ровно один раз.

Выход из цикла с помощью оператора break

На этом шаге вы узнаете, как досрочно выйти из цикла с помощью оператора break. Оператор break немедленно завершает текущий цикл и передает управление оператору, следующему за циклом.

Это полезно, когда вы ищете что-то в цикле и хотите остановиться, как только найдете это, не завершая оставшиеся итерации.

Давайте используем цикл for, который должен выполниться 10 раз, но остановится раньше, когда будет выполнено определенное условие. Замените код в script.js следующим:

const output = document.getElementById("output");
let htmlContent = "<h2>Использование оператора break:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Найдено 6! Прерывание цикла.<br>";
    break; // Немедленный выход из цикла
  }
  htmlContent += `Текущее число: ${i}<br>`;
}

htmlContent += "Цикл завершен.";
output.innerHTML = htmlContent;

В этом коде цикл for настроен на подсчет от 1 до 10. Однако оператор if проверяет, равно ли i 6. Когда это происходит, выполняется оператор break, и цикл завершается. Код не будет выводить числа с 7 по 10.

Сохраните файл и просмотрите вкладку Web 8080. Вы увидите, что подсчет остановится на 5, за которым последует сообщение "Прерывание цикла".

Резюме

Поздравляем с завершением этой лабораторной работы по циклам JavaScript! Вы научились управлять потоком выполнения ваших программ, повторяя блоки кода.

В этой лабораторной работе вы рассмотрели:

Цикл for, который идеально подходит, когда вы заранее знаете количество итераций, используя инициализатор, условие и конечное выражение.
Цикл while, который повторяется до тех пор, пока условие истинно, и требует ручного управления счетчиком.
Цикл do-while, который гарантирует как минимум одно выполнение блока кода перед проверкой условия.
Оператор break, который предоставляет способ досрочного выхода из любого цикла на основе условия.

Овладение циклами — это критически важный шаг на пути к тому, чтобы стать опытным разработчиком JavaScript. Не стесняйтесь экспериментировать с кодом из этой лабораторной работы, чтобы закрепить свои знания.