Переменные цикла в javascript

Классический цикл максимально удобен для работы со счётчиками.

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

Обновлено 20 октября 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 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’

Пропустим описание шагов, когда переменная равна 2, 3 и 4, перейдём к этапу когда переменная i станет равной 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) >

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

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

На практике

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

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

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

 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)

Источник

Переменные цикла в javascript

Циклы позволяют в зависимости от определенных условий выполнять некоторое действие множество раз. В JavaScript имеются следующие виды циклов:

Цикл for

Цикл for имеет следующее формальное определение:

for ([инициализация счетчика]; [условие]; [изменение счетчика]) < // действия >

Например, используем цикл for для перебора чисел от 0 до 4:

for(let i = 0; i console.log("Конец работы");

Первая часть объявления цикла — let i = 0 — создает и инициализирует счетчик — переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.

Третья часть — i++ — приращение счетчика на единицу.

То есть при запуске переменная i равна 0. Это значение отвечает условию i

После выполнения блока цикла выполняется треться часть объявления цикла — приращение счетчика. То есть переменная i сановится равной 1. Это значение также отвечает условию, поэтому блок цикла снова выполняется. Таким образом, блок цикла сработает 5 раз, пока значение i не станет равным 5. Это значение НЕ отвечает условию, поэтому произойдет выход из цикла. И управление программой перейдет к инструкциям, которые идут после блока цикла. Консольный вывод программы:

Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 5 итераций.

При этом необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:

В данном случае на консоль выводится числа от 10 до 6.

Или увеличим счетчик на 2:

Здесь выводятся на консоль все четные числа от 0 до 8

При этом можно опускать различные части объявления цикла:

В данном случае переменная i определена вне цикла. В самом объявлении цикла есть только условие, остальные две части отсутствуют. Изменение переменной происходит в самом блоке цикла: оно увеличивается на 10. В итоге на консоль будут выведены числа 0, 10, 20, 30, 40, 50.

Применение нескольких счетчиков в цикле

При необходимости можно использовать несколько счетчиков:

for(let i = 1, j=1; i < 5, j < 4; i++, j++)< console.log(i + j); >// 1 итерация: i=1, j=1; i + j = 2 // 2 итерация: i=2, j=2; i + j = 4 // 3 итерация: i=3, j=3; i + j = 6

Здесь теперь используются два счетчика и два условия. Рассмотрим пошагово, что здесь происходит:

Для каждой переменной установлены свои условия. И вначале начальные значения переменных соответствуют этим условиям:

В блоке цикла выводится сумма этих переменных. И дальше значения обоих переменных увеличиваются на единицу. Они становятся равны

После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны

Вложенные циклы

Одни циклы могут внутри себя содержать другие:

Здесь один цикл включается в себя другой. ВО внешнем цикле определяется переменная i. Вначале она равна 1 и это значение соответствует условию цикла ( i

Во внутреннем цикле определяется переменная-счетчик j, которая изначально равна 1, и потом внутренний цикл выполняет 5 итераций, пока переменная j не станет равна 5.

После того, как блок внешнего цикла завершен, переменная i увеличивается на 1 и становится равной 2, что опять же соответствует условию. И снова выполняется блок внешнего цикла. В этом блоке снова выполняются пять итераций внутреннего цикла. И так далее. В итоге внутренний цикл будет выполняться 25 раз.

Цикл while

Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:

Опять же выведем с помощью while числа от 1 до 5:

Цикл while здесь будет выполняться, пока значение i не станет равным 6.

do..while

В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл повторяется. Например:

Здесь код цикла сработает 5 раз, пока i не станет равным 5. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.

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

Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break :

for(let i=1; i console.log("Конец работы");

Данный цикл увеличивает переменную i c 1 до 10 включая, то есть согласно условию цикла блок цикла должен выполняться 10 раз, то есть поизвести 10 итераций. Однако поскольку в блоке цикла происходит поверка if(i===6) break; , то, когда значение переменной i достигнет 6, то данное условие прервет выполнение цикла с помощью оператора break. И цикл заершит работу.

Если нам надо просто пропустить итерацию, но не выходить из цикла, мы можем применять оператор continue :

for(let i=1; i console.log("Конец работы");

В этом случае, когда значение переменной i станет равным 6, то в цикле конструкция if(i===6) continue завершит текущую итерацию, далее идущие инструкции цикла не будут выполняться, и произойдет переход к следующей итерации:

1 2 3 4 5 7 8 9 10 Конец работы

for..in

Цикл for..in предназначен главным образом для перебора объектов. Его формальное определение:

Этот цикл перебирает все свойства объекта. Например:

const person = ; for(prop in person)

Здесь перебирается объек person, который имеет два свойства — name и age. Соответственно на консоли мы увидим:

Цикл for. of

Цикл for. of предназначен для перебора наборов данных. Например, строка представляет фактически набор символов. И мы можем перебрать ее с помощью данного цикла:

const website = «METANIT.COM»; for(ch of website)

В итоге цикл перебирает все символы строки website и помещает каждый текущий символ в переменную ch , значение которой затем выводится на консоль.

Другим примером может быть перебор массива:

const people = [«Tom», «Sam», «Bob»]; for(const person of people)

В данном случае цикл перебирает элементы массива people. Каждый элемент последовательно помещается в константу person . И далее мы можем вывести ее значение на консоль:

Источник