Циклы JavaScript
Циклы JavaScript: for, while, do...while, for...in и for...of, а также break и continue. Синтаксис, примеры и типичные ошибки.
Введение в циклы JavaScript
Циклы JavaScript — это фундаментальная концепция программирования, позволяющая выполнять блоки кода многократно. В этом руководстве подробно рассматриваются различные типы циклов в JavaScript, их синтаксис и практическое применение.
Что такое циклы в JavaScript?
Цикл выполняет один и тот же блок кода снова и снова, пока условие остаётся истинным. Каждый проход через тело цикла называется итерацией. Циклы позволяют обработать каждый элемент списка, повторить действие заданное количество раз или продолжать выполнение до изменения некоторого состояния — без необходимости копировать и вставлять код.
Зачем использовать циклы?
Без циклов вам пришлось бы писать один и тот же оператор для каждого повторения:
console.log(1);
console.log(2);
console.log(3);
// ...and so on for every numberЦикл сворачивает это в несколько строк, которые работают хоть для 3 чисел, хоть для 3 миллионов. В результате код становится короче, его легче изменять, и в нём значительно меньше ошибок.
Обзор типов циклов
Давайте разберём различные циклы, доступные в JavaScript, их синтаксис и эффективное применение.
Цикл while
Цикл while — простейший тип цикла в JavaScript. Он проверяет условие перед каждой итерацией и продолжает выполнение, пока условие истинно. Используйте его, когда заранее не знаете, сколько раз нужно повторить действие — например, при чтении данных до достижения конечного маркера.
Синтаксис:
while (condition) {
// code to be executed
}Пример:
Тело цикла в конечном счёте должно делать условие ложным. Если этого не происходит, возникает бесконечный цикл, который зависает на странице. Инструкция i++ выше гарантирует завершение цикла — без неё условие i < 5 остаётся истинным вечно.
Цикл do...while
Цикл do...while проверяет условие после каждой итерации, поэтому тело цикла выполняется хотя бы один раз — даже если условие изначально ложно. Это удобно для подсказок или меню, которые должны отобразиться хотя бы один раз, прежде чем принять решение о повторении.
Синтаксис:
do {
// code to be executed
} while (condition);Пример:
Цикл for
Цикл for — наиболее часто используемый цикл. Он объединяет три части в одну строку: инициализацию (выполняется один раз в начале), условие (проверяется перед каждой итерацией) и финальное выражение (выполняется после каждой итерации, обычно для увеличения счётчика). Это естественный выбор, когда вы знаете, сколько раз хотите выполнить повторение.
Синтаксис:
for (initialization; condition; finalExpression) {
// code to be executed
}Пример:
Цикл for...in
Этот цикл перебирает перечислимые имена свойств (ключи) object. Используйте его, когда вам нужны ключи object. Избегайте его для arrays: он возвращает string-индексы ("0", "1", …), не гарантирует порядок и также обходит унаследованные свойства — вместо него используйте for...of или методы array.
Синтаксис:
for (variable in object) {
// code to be executed
}Пример:
Цикл for...of
Цикл for...of перебирает значения итерируемых объектов, таких как arrays, strings, Map и Set. Это самый чистый способ обхода элементов array, когда индекс не нужен. Запомните разницу: for...in даёт ключи, а for...of — значения.
Синтаксис:
for (variable of iterable) {
// code to be executed
}Пример:
Выбор подходящего цикла
| Цикл | Лучше всего подходит для | Что предоставляет |
|---|---|---|
for | Известного количества повторений или когда нужен индекс | Счётчик, которым вы управляете |
while | Повторения до изменения условия, количество неизвестно | Ничего — вы сами управляете состоянием |
do...while | То же, что while, но должен выполниться хотя бы раз | Ничего — сначала выполняет тело |
for...in | Перебора ключей object | Имена свойств (string) |
for...of | Перебора значений array, string, Map или Set | Каждое значение |
В большинстве задач с arrays вы также встретите методы forEach, map и filter (см. методы array) — они зачастую читаются понятнее, чем ручной цикл.
Вложенные циклы
Цикл может содержать другой цикл. Внутренний цикл полностью выполняется при каждом проходе внешнего цикла, что удобно для работы с сетками, таблицами и парами.
Управление выполнением цикла
Использование break в циклах
Оператор break используется для выхода из цикла до того, как условие станет ложным.
Пример:
Использование continue в циклах
Оператор continue пропускает текущую итерацию и переходит к следующей.
Пример:
Выход из вложенных циклов
По умолчанию break выходит только из ближайшего цикла. Чтобы выйти из внешнего цикла изнутри внутреннего, присвойте внешнему циклу метку и выполните break с указанием этой метки.
Заключение
Понимание и эффективное использование различных типов циклов в JavaScript расширяет ваши возможности писать лаконичный и эффективный код. Выбирайте for, когда знаете количество итераций, while/do...while — когда не знаете, for...of — для перебора значений, а for...in — для ключей object, и остерегайтесь бесконечных циклов.
Продолжайте изучение смежных тем: условные операторы, arrays, методы array и функции.