Elementor Header #8

65. Цикл For

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

Синтаксис цикла for

Основной синтаксис цикла for выглядит следующим образом:

				
					for (initialization; condition; update) {
    // код, который будет выполнен на каждой итерации
}

				
			
  • initialization: Инициализация переменной, которая будет использоваться в условии цикла.
  • condition: Условие, при котором цикл продолжает выполнение. Как только условие становится ложным, цикл завершает свою работу.
  • update: Обновление переменной после каждой итерации цикла.

Пример использования цикла for

Давайте рассмотрим простой пример, который выводит числа от 1 до 5 на экран.

				
					for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// Вывод:
// 1
// 2
// 3
// 4
// 5

				
			

В этом примере:

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

Вложенные циклы for

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

Пример вложенных циклов:

				
					for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 2; j++) {
        console.log(`i = ${i}, j = ${j}`);
    }
}

// Вывод:
// i = 0, j = 0
// i = 0, j = 1
// i = 1, j = 0
// i = 1, j = 1
// i = 2, j = 0
// i = 2, j = 1

				
			

В этом примере внешний цикл выполняется 3 раза, а внутренний — 2 раза для каждой итерации внешнего цикла.

Циклы for с шагом

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

Пример с шагом 2:

				
					for (let i = 0; i <= 10; i += 2) {
    console.log(i);
}

// Вывод:
// 0
// 2
// 4
// 6
// 8
// 10

				
			

В этом примере переменная i увеличивается на 2 в каждой итерации.

Циклы for с убыванием

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

Пример с убыванием:

				
					for (let i = 5; i >= 1; i--) {
    console.log(i);
}

// Вывод:
// 5
// 4
// 3
// 2
// 1

				
			

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

Распространённые ошибки

  1. Забыть обновить переменную в цикле

    Ошибка: Цикл бесконечно выполняется, если переменная обновления пропущена.

				
					for (let i = 0; i < 5; ) {
    console.log(i);
}
// Цикл бесконечно выводит 0

				
			

Исправление: Убедитесь, что переменная обновляется в каждом проходе цикла.

Ошибки в условии цикла

Ошибка: Цикл не завершается, если условие написано неверно.

				
					for (let i = 0; i <= 5; i--) {
    console.log(i);
}
// Цикл бесконечно выполняется с отрицательными значениями

				
			

Исправление: Проверьте корректность условия и оператора обновления.

Неправильное использование вложенных циклов

Ошибка: Неправильное использование вложенных циклов может привести к неожиданным результатам.

				
					for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 2) {
            break; // Прерывает только внутренний цикл
        }
        console.log(`i = ${i}, j = ${j}`);
    }
}
// Вывод:
// i = 0, j = 0
// i = 0, j = 1
// i = 1, j = 0
// i = 1, j = 1
// i = 2, j = 0
// i = 2, j = 1
				
			

Заключение

Цикл `for` является мощным инструментом для выполнения повторяющихся задач в JavaScript. Понимание его синтаксиса и возможностей помогает эффективно решать задачи и управлять процессом итерации в вашем коде. Использование `break`, `continue` и правильное условие цикла помогают избегать распространённых ошибок и делают код более предсказуемым и понятным.

  • Тестовое задание Напишите цикл `for`, который выводит числа от 10 до 1 в обратном порядке.
  • Создайте вложенный цикл `for`, который выводит координаты в формате `x, y` для сетки 3×3.
  • Реализуйте цикл `for`, который находит сумму всех четных чисел от 1 до 20.
  • Напишите цикл `for`, который пропускает числа, делящиеся на 5, и выводит остальные числа от 1 до 30.

Решите все задания, чтобы практиковаться в формировании строк в циклах и избегать распространённых ошибок.

logo