Цикл for - это один из наиболее распространенных типов циклов в языке JavaScript. Он позволяет повторять выполнение блока кода заданное количество раз. Также в статье рассмотрены циклы for...of и for...in и примеры к ним.

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

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

for (инициализация; условие; обновление) {
  // блок кода, который нужно выполнить
}

• Инициализация - это выражение, которое выполняется перед началом выполнения цикла, обычно используется для инициализации счетчика цикла.
• Условие - это выражение, которое проверяется перед каждой итерацией цикла. Если условие истинно, то блок кода внутри цикла выполняется, если же ложно, то цикл завершается.
• Обновление - это выражение, которое выполняется после каждой итерации цикла и обычно используется для изменения счетчика цикла.

Примеры цикла for

Для более понятного объяснения работы цикла for, рассмотрим примеры.

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

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

В этом примере мы используем цикл for для вывода чисел от 0 до 4. Инициализация устанавливает переменную i в значение 0. Условие проверяет, что i меньше 5. Блок кода выводит значение i в консоль. Обновление увеличивает i на 1 после каждой итерации. В результате будут выведены числа от 0 до 4.

Пример 2: вывод элементов массива

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

В этом примере мы используем цикл for для вывода каждого элемента массива arr. Инициализация устанавливает переменную i в значение 0. Условие проверяет, что i меньше длины массива arr. Блок кода выводит элемент массива arr[i] в консоль. Обновление увеличивает i на 1 после каждой итерации. В результате будут выведены все элементы массива arr.

Пример 3: вычисление суммы чисел от 1 до 10

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

Переменная sum инициализируется с нулевым значением.

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

Тело цикла выполняется на каждой итерации, прибавляя значение i к переменной sum.

После выполнения цикла, значение переменной sum равно сумме чисел от 1 до 10.

Функция console.log выводит значение sum в консоль, которая должна быть равна 55.

Цикл for...in в JavaScript

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

Пример использования:

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

Результат:

>>> name: John
>>> age: 30
>>> gender: male

Цикл for...of в JavaScript

Цикл for...of используется для перебора элементов массива или других коллекций. Он проходится по каждому элементу коллекции и выполняет заданный код для каждого элемента.

Пример использования:

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

for (let num of arr) {
  console.log(num);
}

Результат:

>>> 1
>>> 2
>>> 3
>>> 4
>>> 5

Также в JavaScript существует метод forEach() для перебора элементов массива, который является альтернативой циклу for...of. Однако, for...of более универсален и может использоваться для перебора различных типов коллекций.