`for`

Время чтения: меньше 5 мин

Кратко

Управляющая конструкция, которая создаёт цикл .

Как пишется

Описание цикла в коде выглядит так:

        
          
          for (инициализация; условие; завершающая операция) {  // тело цикла}
          for (инициализация; условие; завершающая операция) {
  // тело цикла
}

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

        
          
          for (let count = 5; count > 0; count--) {  console.log(count)}// напечатает 5, 4, 3, 2, 1
          for (let count = 5; count > 0; count--) {
  console.log(count)
}

// напечатает 5, 4, 3, 2, 1

Пример

Создание разноцветных квадратов через цикл for:

Открыть демо в новой вкладке

Как это понять

Рассмотрим пример:

        
          
          for (let i = 0; i < 5; i++) {  console.log("Счётчик равен: " + i)}
          for (let i = 0; i < 5; i++) {
  console.log("Счётчик равен: " + i)
}

Что произойдёт при запуске этого кода?

Один раз выполнится инициализация.
Потом создастся переменная i и ей присвоится значение 0, let i = 0. Эта переменная доступна только пока работает цикл, так как мы её объявили через let. Переменные созданные через let доступны только в рамках блока, где они созданы. В нашем случае блок — это тело цикла и шаги инициализации, условия и итоговой операции.
Идёт проверка условия i < 5. Значение переменной в текущий момент времени это 0, а 0 меньше 5, значит условие истинно.
Так как условие истинно, выполняется тело цикла: console.log("Счётчик равен: " + i);

В консоль будет выведено "Счётчик равен: 0"

После выполнения тела цикла идёт завершающая операция i++ после которой значение переменной i увеличивается и становится равным 1.

Последующие шаги повторения цикла уже не включают в себя инициализацию. Сразу идёт проверка условия i < 5 : 1 меньше 5, поэтому условие истинно.

Выполняется тело цикла. В консоль будет выведено "Счётчик равен: 1"

Выполняется завершающая операция i++. Переменная i становится равной 2

Пропустим описание шагов, когда переменная равна 2, 3 и 4, перейдём к этапу когда переменная i станет равной 5.

😴

Проверка условия i < 5. 5 < 5 и условие ложно. Выполнения тела цикла не происходит, как и завершающей операции.

На этом работа цикла заканчивается. Далее программа переходит к следующей за циклом инструкции.

Операторы `break` и `continue`

Также, если это необходимо, можно прервать выполнение цикла оператором break.

Пример

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

После выполнения кода выше в консоли мы увидим следующее:

0
1
2
3
4
break

Всё. Так как у нас переменная-счётчик будет равна 5, мы зайдём в условие, сработает оператор break, и цикл прервётся.

Есть ещё один оператор continue, который позволяет пропустить итерацию цикла, не прерывая его, и перейти к следующей.
Рассмотрим пример, в котором мы хотим прервать итерацию цикла, если переменная-счётчик равна 5

Пример

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

После выполнения кода выше в консоли мы увидим следующее:

0
1
2
3
4
continue
6
7
8
9

Из примера видно, что в консоль не вывелась 5, а вместо неё вывелось continue — попав в условие, мы перешли из него на новую итерацию цикла.

На практике

doka-dog

🛠 Необязательно начинать счётчик с нуля. Он может быть равным любому значению. Отсчёт с нуля делается для удобства восприятия и облегчения дальнейшего обслуживания кода. Условие проверки так же может быть любым, важно чтобы результат проверки был true или false:

Открыть демо в новой вкладке

Завершающая операция может быть не только i++ или i--, а абсолютно любой:

        
          
          for (let i = 0; i < 10; i = i + 2) {  console.log(i)}// Результат работы цикла// 0// 2// 4// 6// 8
          for (let i = 0; i < 10; i = i + 2) {
  console.log(i)
}
// Результат работы цикла
// 0
// 2
// 4
// 6
// 8

🛠 При необходимости произвести операции не над всеми данными, а только над частью.

Например при выборке каждого N элемента:

Открыть демо в новой вкладке

🛠 Через циклы удобно вставлять данные, например в таблицы или списки:

Открыть демо в новой вкладке

🛠 Важно следить за условиями и завершающими операциями, чтобы не попасть в бесконечный цикл. Если попасть в бесконечное исполнение, то страница «зависнет». Браузеры умеют определять такие страницы, но для пользователя это крайне неприятная штука:

Открыть демо в новой вкладке

🛠 Хотя для поиска элемента в массиве существуют встроенные функции, но если нет понимания как работают и что представляют из себя «функции высшего порядка» — можно воспользоваться циклом for:

        
          
          let arr = [1, 2, 5, -3, 15, 20, 13, -3, -5, -10, 22, 14]// Задача — найти все отрицательные элементыlet found = []for (let i = 0; i < arr.length; i++) {  if (arr[i] < 0) {    found.push(arr[i])  }}console.log(found)
          let arr = [1, 2, 5, -3, 15, 20, 13, -3, -5, -10, 22, 14]
// Задача — найти все отрицательные элементы
let found = []
for (let i = 0; i < arr.length; i++) {
  if (arr[i] < 0) {
    found.push(arr[i])
  }
}
console.log(found)

Кратко

Как пишется

Пример

Как это понять

Операторы break и continue

Пример

Пример

На практике

doka-dog

Операторы `break` и `continue`