Карта сайта

Урок 8: Циклы в JavaScript’e

/Уроки по JavaScript/Урок 8: Циклы в JavaScript’e
Урок 8: Циклы в JavaScript’e
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы разберем циклы в JavaScript. Если вы мечтаете автоматизировать повторяющиеся задачи, обрабатывать массивы данных или создавать сложные алгоритмы, циклы станут вашими верными помощниками. В этом уроке я подробно объясню, как работают циклы for, while, do...while, а также как управлять их выполнением с помощью break и continue. В конце вас ждут практические задачи и полезные советы.

Зачем нужны циклы?

Представьте, что вам нужно вывести числа от 1 до 100 в консоль. Без циклов пришлось бы писать console.log(1), console.log(2) и так 100 раз. Циклы позволяют выполнять один и тот же код многократно, экономя время и силы. Они особенно полезны при:

  • Обработке массивов и объектов.
  • Выполнении математических вычислений.
  • Работе с DOM-элементами на странице.

Цикл for

Синтаксис:

for (начало; условие; шаг) {
  // Тело цикла
}
  • Начало — инициализация счетчика (например, let i = 0).
  • Условие — проверка перед каждой итерацией. Если true, цикл выполняется.
  • Шаг — изменение счетчика после каждой итерации (например, i++).

Пример: Вывод чисел от 0 до 4

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Как это работает:

  1. Создается переменная i = 0.
  2. Проверяется условие i < 5. Если true, выполняется тело цикла.
  3. После каждой итерации i увеличивается на 1 (i++).

Пример: Сумма чисел от 1 до 10

let sum = 0;
for (let i = 1; i <= 10; i++) {
  sum += i;
}
console.log(sum); // 55

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

Цикл while

Синтаксис:

while (условие) {
  // Тело цикла
}

Цикл выполняется, пока условие истинно. Подходит для случаев, когда количество итераций неизвестно заранее.

Пример: Обратный отсчет

let count = 5;
while (count > 0) {
  console.log(count); // 5, 4, 3, 2, 1
  count--;
}

Пример: Ввод данных от пользователя

let userInput;
while (userInput !== 'exit') {
  userInput = prompt('Введите "exit" для выхода:');
}

Убедитесь, что условие когда-нибудь станет false. Иначе цикл будет бесконечным!

Цикл do…while

Синтаксис:

do {
  // Тело цикла
} while (условие);

Отличается от while тем, что тело выполнится хотя бы один раз, даже если условие изначально ложно.

Пример: Проверка пароля

let password;
do {
  password = prompt('Введите пароль:');
} while (password !== 'secret');
alert('Добро пожаловать!');

Пример: Генерация случайных чисел

let randomNumber;
do {
  randomNumber = Math.floor(Math.random() * 10);
  console.log(randomNumber);
} while (randomNumber !== 7);

Прерывание циклов: break и continue

Оператор break

Немедленно завершает выполнение цикла.

Пример: Поиск первого отрицательного числа

const numbers = [3, 7, -1, 5, -4];
for (let num of numbers) {
  if (num < 0) {
    console.log('Найдено отрицательное число:', num);
    break; // Цикл прерывается
  }
}

Оператор continue

Пропускает текущую итерацию и переходит к следующей.

Пример: Вывод нечетных чисел

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // Пропустить четные числа
  }
  console.log(i); // 1, 3, 5, 7, 9
}

Практические задачи

Задача 1: Сумма четных чисел

Напишите цикл, который считает сумму всех четных чисел от 2 до 20.

Решение:

let sum = 0;
for (let i = 2; i <= 20; i += 2) {
  sum += i;
}
console.log(sum); // 110

Задача 2: Поиск простого числа

Проверьте, является ли число N простым (делится только на 1 и себя).

Решение:

function isPrime(n) {
  if (n <= 1) return false;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (n % i === 0) return false;
  }
  return true;
}
console.log(isPrime(7)); // true

Задача 3: Вывод пирамиды

С помощью циклов выведите в консоль пирамиду из звездочек:

*
**
***
****
*****

Решение:

for (let i = 1; i <= 5; i++) {
  let row = '';
  for (let j = 0; j < i; j++) {
    row += '*';
  }
  console.log(row);
}

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

  1. Бесконечные циклы. Убедитесь, что условие цикла меняется с каждой итерацией.
  2. Неправильные границы. Проверяйте, включены ли крайние значения (например, i <= 10 или i < 10).
  3. Использование var вместо let. В циклах for всегда используйте let, чтобы избежать проблем с областью видимости.

Советы по работе с циклами

  • Используйте console.log() для отладки: выводите значения переменных на каждой итерации.
  • Разбивайте сложные задачи на части. Например, сначала напишите цикл для вывода данных, а потом добавьте логику обработки.
  • Практикуйтесь! Чем больше задач решите, тем лучше поймете нюансы.

Теперь вы умеете работать с циклами в JavaScript. В следующем уроке мы разберем функции. Основной строительный блок любого приложения. Вы узнаете, как создавать собственные функции, передавать аргументы и возвращать результаты.

Полный курс «JavaScript для начинающих» доступен здесь: https://max-gabov.ru/javascript-dlya-nachinaushih