skip to main content

for()

js

Кратко 🔗

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

Как пишется 🔗

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

for (инициализация; условие; завершающая операция) { ... тело цикла ...}
  1. Инициализация — в этой части задается начальное значение счетчика цикла.

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

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

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

for (let count = 5; count > 0; count--) {
console.log(count)
}

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

Пример 🔗

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

See the Pen for Кратко by vindi-r (@vindi-r) on CodePen.

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

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

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 и условие ложно. Выполнения тела цикла не происходит, как и завершающей операции.

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

В работе 🔗

Миша 👨‍🔧

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

See the Pen for в работе by vindi-r (@vindi-r) on CodePen.

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

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

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

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

See the Pen for в работе by vindi-r (@vindi-r) on CodePen.

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

See the Pen for в работе by vindi-r (@vindi-r) on CodePen.

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

See the Pen for в работе, битый цикл by vindi-r (@vindi-r) on CodePen.

🛠 Хотя для поиска элемента в массиве существуют встроенные функции, но если нет понимания как работают и что представляют из себя «функции высшего порядка» — можно воспользоваться циклом 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)

Автор: Миша 👨‍🔧