for

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

Кратко

Секция статьи "Кратко"

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

Как пишется

Секция статьи "Как пишется"

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

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

        
        
          
        
      
  1. Инициализация — в этой части задаётся начальное значение счётчика цикла.

  2. Условие — тут задаётся условие по которому выполняется цикл. Если условие ложно, работа цикла прекращается и тело цикла не выполняется.

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

  4. Тело цикла — это блок операций, которые будут выполнены в случае если условие истинно.

        
          
          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)
}

        
        
          
        
      

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

  1. Один раз выполнится инициализация.

  2. Потом создастся переменная i и ей присвоится значение 0, let i = 0. Эта переменная доступна только пока работает цикл, так как мы её объявили через let. Переменные созданные через let доступны только в рамках блока, где они созданы. В нашем случае блок — это тело цикла и шаги инициализации, условия и итоговой операции.

  3. Идёт проверка условия i < 5. Значение переменной в текущий момент времени это 0, а 0 меньше 5, значит условие истинно.

  4. Так как условие истинно, выполняется тело цикла: console.log("Счётчик равен: " + i);

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

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

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

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

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

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

😴

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

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

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

Секция статьи "Операторы 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 — попав в условие, мы перешли из него на новую итерацию цикла.

На практике

Секция статьи "На практике"

Дока Дог

Секция статьи "Дока Дог"

🛠 Необязательно начинать счётчик с нуля. Он может быть равным любому значению. Отсчёт с нуля делается для удобства восприятия и облегчения дальнейшего обслуживания кода. Условие проверки так же может быть любым, важно чтобы результат проверки был 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)