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

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

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

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

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

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

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

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

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

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

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

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

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

😴

7. Проверка условия 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)

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