Жаркий сезон
Жаркий сезон
Скидки до 55 000 ₽ + вторая профессия в подарок
Главная | Все статьи | Код

Циклы while и for в JavaScript

JavaScript Время чтения статьи ~3 минуты
Циклы while и for в JavaScript главное изображение

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

Рассмотрим два основных типа циклов в JS: for и while, их синтаксис, применение, типичные ошибки и примеры использования.

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Цикл while

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

Записывается этот цикл так:

while (условие) {

// блок кода

}

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

Рассмотрим простой пример, где мы используем цикл while для вывода чисел от 1 до 5.

let i = 1;

while (i <= 5) {

console.log(i);

i++;

}

В этом примере переменная i инициализируется значением 1. Цикл продолжается, пока i меньше или равно 5. После каждой итерации переменная i увеличивается на 1. Когда i становится больше 5, цикл завершается.

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Типичные ошибки при использовании цикла while

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

let i = 1;

while (i <= 5) {

console.log(i);

// забыли увеличить i

}

В этом примере переменная i никогда не увеличивается, поэтому условие i <= 5 всегда истинно.

Чтобы избежать таких ошибок, убедитесь, что условие цикла изменяется внутри него и в итоге становится ложным.

Поиск элемента в массиве с помощью цикла while

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

let numbers = [1, 2, 3, 4, 5];

let target = 3;

let found = false;

let index = 0;

while (index < numbers.length && !found) {

if (numbers[index] === target) {

found = true;

} else {

index++;

}

}

console.log(found ? "Элемент найден" : "Элемент не найден");

Как только элемент найден, цикл останавливается.

Цикл for

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

for (инициализация; условие; итерация) {

// блок кода

}

Рассмотрим простой пример, где мы используем цикл for в JS для вывода чисел от 1 до 10.

for (let i = 1; i <= 10; i++) {

console.log(i);

}

В этом примере переменная i инициализируется значением 1. Цикл продолжается, пока i меньше или равно 10. После каждой итерации переменная i увеличивается на 1.

Цикл for в JS более сложный, чем while, его можно сочетать с дополнительными условиями. Например, можно добавить директиву break, благодаря которой выполнение цикла мгновенно прервется, даже если нужное количество итераций еще не выполнено.

Познакомьтесь с Фронтенд разработкой бесплатно

Начните с этих 5 уроков

Типичные ошибки при использовании циклов for в JS

Распространенные ошибки при использовании цикла for включают неправильную инициализацию, условие или итерацию, что может привести к бесконечным циклам.

for (let i = 1; i <= 10; ) {

console.log(i);

// забыли увеличить i

}

В этом примере переменная i никогда не увеличивается, поэтому условие i <= 10 всегда истинно. Чтобы избежать таких ошибок, убедитесь, что все три части выражения цикла for в JS правильно заданы и корректно выполняются.

Заключение

Циклы while и for — базовые элементы кода в языке JavaScript, как и в некоторых других языках. Умение правильно применять эти циклы позволяет решать множество практических задач в разработке. Хотите научиться этому? Запишитесь на наши курсы по Front-end разработке.

Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Обучитесь разработке бэкенда сайтов и веб-приложений — серверной части, которая отвечает за логику и базы данных
10 месяцев
с нуля
Старт 25 июля
профессия
от 6 183 ₽ в месяц
Выполняйте ручное тестирование веб-приложений, находите ошибки в продукте. Узнайте все о тест-дизайне.
4 месяца
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Научитесь разработке веб-приложений, сайтов и программного обеспечения на языке Java, программируйте и используйте структуры данных
10 месяцев
с нуля
Старт 25 июля
профессия
от 5 025 ₽ в месяц
новый
Собирайте, анализируйте и интерпретируйте данные, улучшайте бизнес-процессы и продукт компании. Обучитесь работе с библиотеками Python
9 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Занимайтесь созданием сайтов, веб-приложений, сервисов и их интеграцией с внутренними бизнес-системами на бекенд-языке PHP
10 месяцев
с нуля
Старт 25 июля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 25 июля
профессия
от 9 900 ₽ в месяц
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 25 июля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 25 июля
профессия
новый
Организовывайте процесс автоматизации тестирования на проекте, обучитесь языку программирования JavaScript, начните управлять процессом тестирования
8 месяцев
c опытом
в разработке
Старт 25 июля