4. Циклы (for/while)

JavaScript: Мозги - Циклы (for/while)

Иллюстрация к уроку Циклы – это фундаментальная концепция в программировании, позволяющая выполнять блок кода несколько раз. Они необходимы для автоматизации повторяющихся задач и обработки данных.

Что такое циклы?

Представьте, что вам нужно 10 раз вывести в консоль фразу “Привет, мир!”. Без циклов вам пришлось бы 10 раз писать console.log("Привет, мир!"). Циклы позволяют сделать это элегантнее и эффективнее.

JavaScript предоставляет два основных типа циклов: for и while.

Цикл `for`

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

Инициализация: Объявляет и инициализирует переменную-счетчик.
Условие: Определяет, когда цикл должен остановиться.
Инкремент/Декремент: Изменяет значение переменной-счетчика после каждой итерации.

for (let i = 0; i < 10; i++) {
  console.log("Привет, мир! " + i); // Выведет "Привет, мир! 0" ... "Привет, мир! 9"
}

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

let i = 0 – инициализация: создаем переменную i и присваиваем ей значение 0.
i < 10 – условие: цикл будет выполняться, пока i меньше 10.
i++ – инкремент: после каждой итерации значение i увеличивается на 1.

Цикл `while`

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

let i = 0;
while (i < 5) {
  console.log("Значение i: " + i); // Выведет "Значение i: 0" ... "Значение i: 4"
  i++; // Обязательно нужно изменять значение i внутри цикла, иначе он будет бесконечным!
}

Здесь:

let i = 0 – инициализация: мы инициализируем переменную i перед циклом.
i < 5 – условие: цикл выполняется, пока i меньше 5.
i++ – инкремент: мы увеличиваем значение i внутри цикла.

Важно: Не забывайте изменять значение переменной, используемой в условии цикла while, иначе цикл может стать бесконечным!

Практические примеры кода

Пример 1: Работа с массивом используя for

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

for (let i = 0; i < numbers.length; i++) {
  console.log("Элемент массива под индексом " + i + ": " + numbers[i]);
}

Пример 2: Сумма чисел от 1 до 10 используя while

let i = 1;
let sum = 0;

while (i <= 10) {
  sum += i;
  i++;
}

console.log("Сумма чисел от 1 до 10: " + sum);

Жизненный пример

Циклы используются повсеместно в веб-разработке. Например:

DOM манипуляции: Представьте, что вам нужно добавить класс ко всем элементам списка на странице. Вы можете использовать цикл for для перебора всех элементов и добавления класса. Фреймворки, такие как React, Vue и Angular, активно используют циклы (часто замаскированные под более удобные конструкции, такие как map) для рендеринга списков, таблиц и других динамических элементов интерфейса.
Обработка данных: Если у вас есть массив данных, полученный с сервера, вы можете использовать цикл для обработки каждого элемента этого массива – например, для фильтрации, сортировки или преобразования данных.
Анимации: Циклы могут использоваться для создания анимаций, изменяя свойства элементов на странице с определенной частотой.

Ключевые моменты

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