Цикл for

Проверяет условие перед каждой итерацией, есть возможность задать дополнительные настройки, подходит для querySelectorAll();.

let fruits = ["Яблоко", "Апельсин", "Слива"];
for (let i = 0; i < fruits.length; i++) {
//выведет массив
console.log(fruits);     
//выведет значение массива
console.log(fruits[i]);  
//номер итерации
console.log(i);          
}

Цикл for имеет следующее формальное определение:

for (инициализация_счетчика; условие; изменение_счетчика){
// действия
}

Например, используем цикл for для перебора чисел от 0 до 4:

for(let i = 0; i < 5; i++){
console.log(i);
}
console.log("Конец работы");

Первая часть, это объявления цикла let i = 0 создает и инициализирует счетчик - переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.

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

Третья часть, это i++ увеличение счетчика на единицу.

То есть при запуске переменная i равна 0. Это значение отвечает условию i < 5, поэтому будет выполняться блок цикла, а именно строка кода:

console.log(i);

После выполнения блока цикла выполняется треться часть объявления цикла - приращение счетчика. То есть переменная i сановится равной 1. Это значение также отвечает условию, поэтому блок цикла снова выполняется. Таким образом, блок цикла сработает 5 раз, пока значение i не станет равным 5. Это значение не отвечает условию, поэтому произойдет выход из цикла, и управление программой перейдет к инструкциям, которые идут после блока цикла, консольный вывод программы:

0
1
2
3
4
Конец работы

Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 5 итераций.

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

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

Применение нескольких счетчиков в цикле

При необходимости можно использовать несколько счетчиков:

for(let i = 1, j=1; i < 5, j < 4; i++, j++){
console.log(i + j);
}
// 1 итерация: i=1, j=1; i + j = 2
// 2 итерация: i=2, j=2; i + j = 4
// 3 итерация: i=3, j=3; i + j = 6

Здесь теперь используются два счетчика и два условия, рассмотрим пошагово что здесь происходит.

Первая итерация. Начальные значения переменных i и y:

i=1, j=1;

Для каждой переменной установлены свои условия. И вначале начальные значения переменных соответствуют этим условиям:

i < 5, j < 4;

В блоке цикла выводится сумма этих переменных. И дальше значения обоих переменных увеличиваются на единицу. Они становятся равны:

i=2, j=2;

Эти значения также соответствуют условиям, поэтому выполняется вторая итерация.

Вторая итерация. Значения переменных i и y:

i=2, j=2;

После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны:

i=3, j=3;

Эти значения также соответствуют условиям, поэтому выполняется третья итерация.

Третья итерация. Значения переменных i и y:

i=3, j=3;

После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны:

i=4, j=4;

Значение переменной i соответствует условию i < 5, однако значение переменной j (4) и не соответствует условию j < 4. Поэтому происходит выход из цикла. Его работа завершена.

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

Одни циклы могут внутри себя содержать другие:

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

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

Во внутреннем цикле определяется переменная-счетчик j, которая изначально равна 1, и потом внутренний цикл выполняет 5 итераций, пока переменная j не станет равна 5.

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