for

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

В коде цикл выглядит так:

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

Потом создастся переменная 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.

        
          
          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, мы зайдём в блок if. Сработает оператор 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. Попав в условие, мы перешли из него на новую итерацию цикла.

        
          
          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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать