Что такое цикл в javascript

Циклы

Чтобы понять действие условных операторов, мы предлагали представить их в виде разветвлений на дороге, по которой двигается интерпретатор JavaScript. Циклы можно представить как разворот на дороге, возвращающий обратно, который заставляет интерпретатор многократно проходить через один и тот же участок программного кода.

В языке JavaScript имеется четыре цикла: while, do/while, for и for/in. Каждому из них посвящен один из следующих подразделов. Одно из обычных применений циклов — обход элементов массива.

Цикл while

Оператор if является базовым условным оператором в языке JavaScript, а базовым циклом для JavaScript можно считать цикл while. Он имеет следующий синтаксис:

while (выражение)

Цикл while начинает работу с вычисления выражения. Если это выражение имеет ложное значение, интерпретатор пропускает инструкцию, составляющую тело цикла, и переходит к следующей инструкции в программе. Если выражение имеет истинное значение, то выполняется инструкция, образующая тело цикла, затем управление передается в начало цикла и выражение вычисляется снова. Иными словами, интерпретатор снова и снова выполняет инструкцию тела цикла, пока значение выражения остается истинным. Обратите внимание, что имеется возможность организовать бесконечный цикл с помощью синтаксиса while(true).

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

Кроме того, если изменяемая переменная (или переменные) присутствует в выражении, значение выражения может меняться при каждом проходе цикла. Это важно, т.к. в противном случае выражение, значение которого было истинным, никогда не изменится и цикл никогда не завершится! Ниже приводится пример цикла while, который выводит числа от 0 до 9:

var count = 0; while (count

Как видите, в начале переменной count присваивается значение 0, а затем ее значение увеличивается каждый раз, когда выполняется тело цикла. После того как цикл будет выполнен 10 раз, выражение вернет false (т.е. переменная count уже не меньше 10), инструкция while завершится и интерпретатор перейдет к следующей инструкции в программе. Большинство циклов имеют переменные-счетчики, аналогичные count. Чаще всего в качестве счетчиков цикла выступают переменные с именами i, j и k, хотя для того чтобы сделать программный код более понятным, следует давать счетчикам более наглядные имена.

Цикл do/while

Цикл do/while во многом похож на цикл while, за исключением того, что выражение цикла проверяется в конце, а не в начале. Это значит, что тело цикла всегда выполняется как минимум один раз. Эта инструкция имеет следующий синтаксис:

do < инструкция >while (выражение);

Цикл do/while используется реже, чем родственный ему цикл while. Дело в том, что на практике ситуация, когда вы заранее уверены, что потребуется хотя бы один раз выполнить тело цикла, несколько необычна. Ниже приводится пример использования цикла do/while:

function printArray(a) < var len = a.length, i = 0; if (len == 0) console.log("Пустой массив"); else < do < console.log(a[i]); >while (++i < len); >> printArray([1,5,6,8]);

Между циклом do/while и обычным циклом while имеется два отличия. Во-первых, цикл do требует как ключевого слова do (для отметки начала цикла), так и ключевого слова while (для отметки конца цикла и указания условия). Во-вторых, в отличие от цикла while, цикл do завершается точкой с запятой. Цикл while необязательно завершать точкой с запятой, если тело цикла заключено в фигурные скобки.

Цикл for

Цикл for представляет собой конструкцию цикла, которая часто оказывается более удобной, чем цикл while. Цикл for упрощает конструирование циклов, следующих шаблону, общему для большинства циклов. Большинство циклов имеют некоторую переменную-счетчик. Эта переменная инициализируется перед началом цикла и проверяется перед каждой итерацией. Наконец, переменная-счетчик инкрементируется или изменяется каким-либо другим образом в конце тела цикла, непосредственно перед повторной проверкой переменной. Инициализация, проверка и обновление — это три ключевых операции, выполняемых с переменной цикла. Инструкция for делает эти три шага явной частью синтаксиса цикла:

for(инициализация; проверка; инкремент)

Инициализация, проверка и инкремент — это три выражения (разделенных точкой с запятой), которые ответственны за инициализацию, проверку и увеличение переменной цикла. Расположение их в первой строке цикла упрощает понимание того, что делает цикл for, и не позволяет забыть инициализировать или увеличить переменную цикла.

Проще всего объяснить работу цикла for, показав эквивалентный ему цикл while:

инициализация; while(проверка)

Другими словами, выражение инициализации вычисляется один раз перед началом цикла. Это выражение, как правило, является выражением с побочными эффектами (обычно присваиванием). В JavaScript также допускается, чтобы выражение инициализации было инструкцией объявления переменной var, поэтому можно одновременно объявить и инициализировать счетчик цикла.

Выражение проверки вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результатом проверки является истинное значение, выполняется инструкция, являющаяся телом цикла. В конце цикла вычисляется выражение инкремент. Чтобы использование этого выражения имело смысл, оно должно быть выражением с побочными эффектами. Обычно это либо выражение присваивания, либо выражение, использующее оператор ++ или —.

Вывести числа от 0 до 9 можно также с помощью цикла for, как показано ниже, в противовес эквивалентному циклу while, показанному в примере ранее:

for (var count = 0; count < 10; count++) console.log(count);

Конечно, циклы могут быть значительно более сложными, чем в этих простых примерах, и иногда в каждой итерации цикла изменяется несколько переменных. Эта ситуация - единственный случай в JavaScript, когда часто применяется оператор «запятая» - он позволяет объединить несколько выражений инициализации и инкрементирования в одно выражение, подходящее для использования в цикле for:

var i,j; for (i = 0, j = 0; i < 10; i++, j++) // Выведет в консоли таблицу квадратов чисел от 0 - 9 console.log('%s * %s = %s', i, j, i*j); 

Цикл for/in

Цикл for/in использует ключевое слово for, но он в корне отличается от обычного цикла for. Цикл for/in имеет следующий синтаксис:

for (переменная in объект)

В качестве переменной здесь обычно используется имя переменной, но точно так же можно использовать инструкцию var, объявляющую единственную переменную. Параметр объект - это выражение, возвращающее объект. И как обычно, инструкция - это инструкция или блок инструкций, образующих тело цикла.

Для обхода элементов массива естественно использовать обычный цикл for:

var arr = [1,2,3,4,5]; for (var i = 0; i < arr.length; i++) < // Присваивать индексы в массиве переменной i console.log(arr[i]); // Вывести значение каждого элемента массива >

Инструкция for/in так же естественно позволяет выполнить обход свойств объекта:

// Создадим новый объект var obj = ; for (var i in obj) < // Вывести значение каждого свойства объекта console.log(obj[i]); >

Чтобы выполнить инструкцию for/in, интерпретатор JavaScript сначала вычисляет выражение объект. Если оно возвращает значение null или undefined, интерпретатор пропускает цикл и переходит к следующей инструкции. Если выражение возвращает простое значение, оно преобразуется в эквивалентный объект-обертку. В противном случае выражение возвращает объект. Затем интерпретатор выполняет по одной итерации цикла для каждого перечислимого свойства объекта. Перед каждой итерацией интерпретатор вычисляет значение выражения, сохраняет его в переменной и присваивает ему имя свойства (строковое значение).

Обратите внимание, что переменная в цикле for/in может быть любым выражением, возвращающим значение, которое можно использовать слева от оператора присваивания. Это выражение вычисляется в каждой итерации цикла, т.е. каждый раз оно может возвращать разные значения. Например, чтобы скопировать имена всех свойств объекта в массив, можно использовать следующий цикл:

var obj = ; var arr = [], i = 0; for (arr[i++] in obj); // пустое тело цикла console.log(arr); // ["name", "password"]

В действительности цикл for/in может совершать обход не по всем свойствам объекта, а только по перечислимым свойствам. Многочисленные встроенные методы, определяемые в базовом языке JavaScript, не являются перечислимыми. Например, все объекты имеют метод toString(), но цикл for/in не перечислит свойство toString. Кроме встроенных методов также не являются перечислимыми многие другие свойства встроенных объектов. При этом все свойства и методы, определяемые пользователем, являются перечислимыми. Унаследованные свойства, которые были определены пользователем, также перечисляются циклом for/in.

Если в теле цикла for/in удалить свойство, которое еще не было перечислено, это свойство перечислено не будет. Если в теле цикла создать новые свойства, то обычно такие свойстве не будут перечислены. (Однако некоторые реализации могут перечислять унаследованные свойства, добавленные в ходе выполнения цикла.)

Цикл

Программирование построено на повторном выполнении кода. Разбираемся с концепцией, а не с синтаксисом.

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

Открыть/закрыть навигацию по статье
Контрибьюторы:

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

Кратко

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

Цикл — это повторяющаяся последовательность действий.

Цикл состоит из условия и тела цикла.

Перед запуском цикла проверяется условие. Если условие истинное, то выполняется блок кода, который называется телом цикла. Затем этот шаг повторяется. Так будет продолжаться, пока условие не станет ложным.

Каждое выполнение тела цикла называется итерацией.

JavaScript предоставляет несколько способов создания цикла. Самые распространённые из них — while и for (инициализация; условие; завершающая операция) <>

Как понять

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

Зачем нужны циклы, читайте в статье Порядок выполнения

В программировании есть много задач, когда нужно выполнять заранее неизвестное количество однотипных шагов:

• напечатать все сообщения из списка;
• обозначить на карте присланные пользователем координаты;
• уточнять значения при вычислении функций (например, считать квадратный корень).

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

Циклы выполняют блок кода до тех пор, пока выполняется условие. С помощью условия можно управлять, сколько раз выполнять код, который называется телом цикла. Например, выполнять код до тех пор, пока все сообщения не будут напечатаны.

Цикл завершается, когда условие перестаёт выполняться. Такого может и не произойти и цикл будет работать бесконечно. Обычно бесконечный цикл — результат ошибки программиста. Программа зависает, так как тело цикла будет выполняться вечно.

Опишем работу цикла словами:

1. проверь, выполняется ли условие.
2. если условие выполняется, выполни тело цикла. Затем вернись в пункт 1.
3. если условие не выполняется, цикл завершён.

Цикл удобно представлять схемой:

Условие

Скопировать ссылку "Условие" Скопировано

Нужно хорошо понимать, как работает условие, чтобы уверенно работать с циклами. Условие — это выражение, которое JavaScript вычислит в значение.

В простом случае, условие вычисляется в логический тип: true , либо false . Такие выражения получаются при использовании операторов сравнения = = , = = = , > , < , >= , < = , ! = = , ! = .

 let count = 10while (count > 0)  console.log(count) count--> let count = 10 while (count > 0)  console.log(count) count-- >    Скопировать Скопировано Не удалось скопировать   

Код напечатает числа от 10 до 1 на экран.

Выражения в условии можно комбинировать с помощью логических операторов.

В более сложном случае условие будет вычисляться в какой-либо другой тип: число, строку, массив, объект и т.д. В этом случае JavaScript будет приводить получившееся значение к логическому типу.

 let count = 10 while (count)  console.log(count) count--> let count = 10 while (count)  console.log(count) count-- >    Скопировать Скопировано Не удалось скопировать   

Чтобы понять, какой когда цикл остановится, нужно запомнить правила приведения различных типов к логическому. Главное правило:

Все, что не приводится к false , будет true

Осталось запомнить 8 значений, которые приводятся к false :

Зная это правило, мы поймём, что цикл перестанет работать после 10 итераций и напечатает числа от 10 до 1.

Тело цикла

Скопировать ссылку "Тело цикла" Скопировано

Тело цикла — это набор инструкций, заключённый в фигурные скобки. Одно выполнение тела называют итерацией цикла.

Ограничений на операции в теле цикла нет. Тело может содержать объявление переменных, вызовы функций, другие управляющие конструкции и циклы.

Бесконечные циклы

Скопировать ссылку "Бесконечные циклы" Скопировано

Если условие цикла написано так, что оно никогда не станет ложным, цикл будет выполняться бесконечно.

Такой цикл занимает все выделенные ресурсы компьютера. В итоге вкладка браузера или целая программа зависает.

Нажмите на кнопку «Нажми на меня» и на экране появится сообщение. Если же нажать кнопку «Стартовать бесконечный цикл», то «Нажми на меня» перестанет работать — у системы не будет ресурсов обработать нажатие, потому что все ресурсы займёт бесконечный цикл.

К бесконечному циклу могут привести две ошибки:

• неверное условие;
• условие написано верно, но в теле цикла никак не изменяются переменные, которые используются в условии.

На практике

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

Николай Лопин советует

Скопировать ссылку "Николай Лопин советует" Скопировано

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

�� Внутри цикла можно использовать оператор break , он прерывает цикл:

 let count = 5while (count > 0)  if (count === 2)  break // цикл прервётся здесь, оператор break убивает цикл > console.log(count) count--> // 5, 4, 3 let count = 5 while (count > 0)  if (count === 2)  break // цикл прервётся здесь, оператор break убивает цикл > console.log(count) count-- > // 5, 4, 3    Скопировать Скопировано Не удалось скопировать   

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

 let count = 5while (count > 2)  console.log(count) count--> // напечатает 5, 4, 3 let count = 5 while (count > 2)  console.log(count) count-- > // напечатает 5, 4, 3    Скопировать Скопировано Не удалось скопировать   

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

 let count = 5while (count > 0)  count-- if (count === 2)  continue // когда count будет равен 2, итерация прервется здесь и не дойдет до печати > console.log(count)> // напечатает 4, 3, 1, 0 let count = 5 while (count > 0)  count-- if (count === 2)  continue // когда count будет равен 2, итерация прервется здесь и не дойдет до печати > console.log(count) > // напечатает 4, 3, 1, 0    Скопировать Скопировано Не удалось скопировать   

Оператор стараются не использовать, потому что он усложняет чтение кода — появляется ещё одно место, где итерация может завершиться. Почти всегда цикл с continue можно переписать на цикл без него, добавив ветвление if :

 let count = 5while (count > 0)  count-- if (count !== 2)  console.log(count) >> // напечатает 4, 3, 1, 0 let count = 5 while (count > 0)  count-- if (count !== 2)  console.log(count) > > // напечатает 4, 3, 1, 0    Скопировать Скопировано Не удалось скопировать   

Циклы

Когда какое-то действие необходимо повторить большое количество раз, в программировании используются циклы. Например, нужно вывести 200 раз на экран текст «Hello, World!» . Вместо двухсоткратного повторения одной и той же команды вывода текста часто создается цикл, который повторяет 200 раз то, что написано в теле цикла. Каждое повторение называется итерацией.

Итерация в программировании — в широком смысле — организация обработки данных, при которой действия повторяются многократно, не приводя при этом к вызовам �� самих себя (в отличие от рекурсии). В узком смысле — один шаг итерационного, циклического процесса.

Цикл в JavaScript (да и во всех прочих языках ) — это блок кода , который повторяет сам себя, пока известное условие остаётся истинным. Существует множество различных видов циклов, но все они по сути делают тоже самое: повторяют какое-либо действие несколько раз.

Видео​

Цикл while()​

Оператор while создает цикл, выполняющий заданную инструкцию, пока истинно проверяемое условие. Логическое значение условия вычисляется ➕ перед исполнением тела цикла.

Синтаксис​

while (условие)   инструкция // код алгоритма - инструкции > 

условие - выражение, логическое значение которого проверяется каждый раз перед заходом в цикл. Если значение истинно - true , то исполняется инструкция. Когда значение становится ложным - false , мы выходим из цикла.

инструкция - это код алгоритма, который исполняется каждый раз, пока истинно условие. Чтобы выполнить несколько инструкций в цикле, используйте блочный ❌ оператор < . >для их группировки. При использовании 1 команды в теле цикла фигурные скобки можно не ставить.

Перед вами простейший пример цикла while(условие)

Интерактивный редактор

function learnJavaScript()  
 
let count = 0 // count - счётчик 
 
let result = 'Счет: ' 
 
// изменить счет на любой 
 
while (count  10)  
 result += count + ', ' 
 count++ 
 
> 
 
return result
 
>

Cчётчик count в примере имеет значение 0 . Условием нашего цикла (оно прописано в скобках) задано, что блок с кодом будет повторять себя снова и снова до тех пор, пока (то есть собственно while ) count меньше 10 .

Поскольку начальное значение 0 меньше 10 , код запускается. Каждый раз интерпретатор заново проверяет ✔️ условие, если условие всё ещё истинно true , то код будет запущен вновь. Каждый раз мы увеличиваем значение счётчика на 1 . Так как в противном случае значение бы оставалось на 0 , отчего наше условие счётчик < 10 оставалось бы всегда истинным, а наш код бы зациклился навечно!

В итоге после 10 циклов он станет равным 10 . После этого интерпретатор завершит цикл так как условие false и перейдёт к финальным строчкам нашего кода .

Цикл for ()​

Выражение for создаёт цикл, состоящий из трех 3️⃣ необязательных выражений в круглых скобках, разделённых точками с запятой.

Синтаксис​

for ([инициализация]; [условие]; [финальное выражение])  выражение > 

инициализация - выражение или определение переменных. Это выражение может опционально объявлять новые переменные с помощью ключевого��️ слова let . Эти переменные видимы только в цикле for , т.е. в той же области области видимости (для безопасности).

условие - выражение, выполняющееся на каждой интерации цикла. Если выражение истинно, цикл выполняется. Условие не является обязательным. Если его нет, условие всегда считается истиной. Если выражение ложно, выполнение for завершается.

финальное выражение - выражение, выполняющееся в конце интерации цикла. Происходит до следующего выполнения условия. Обычно используется для увеличения++ , уменьшения-- или обновления i += 5 переменной счётчика.

выражение - выполняемый код алгоритма, пока условие цикла истинно . Чтоб выполнить множество выражений в цикле, используйте блок < . >для группировки этих выражений. Чтобы не выполнять никакого выражения в цикле, используйте пустое выражение for (;;;) .

Посчитаем сумму чисел от 0 до 100 :

Интерактивный редактор

function learnJavaScript()  
 
let sum = 0 
 
for (let i = 0; i  100; i++)  
 sum += i
 
> 
 
return sum
 
>

Помните, когда мы писали наш 1️⃣ первый while( ) , что происходило с нашим счётчиком? Мы выяснили, что очень важно, чтобы он постоянно изменялся (в этом нам помог инкремент ++ ). Потому как, если забыть про это, то код попадёт в бесконечную петлю циклов .

Что ж, подобные ситуации случаются довольно регулярно с while‑циклами , именно поэтому for сделали со встроенным счётчиком!

Пример цикла for​

Впервые видя перед собой синтаксис цикла for , можно подумать �� , что это что‑то весьма странное. Но изучить �� его всё равно следует, поскольку вы встретите подобное много раз:

Интерактивный редактор

function learnJavaScript()  
 
let result = 'Счет: ' 
 
for (let i = 0; i  10; i++)  
 result += i + ' ' 
 
> 
 
return result
 
>

Ну как, узнали? А должны были! Ведь это практически тот же код , что мы использовали для while цикла в начале главы! Три части цикла отделены друг от друга точкой с запятой; все они были и в том цикле while , но в других местах. Давайте разберём подробнее:

1. Первым делом мы объявляем счетчик-переменную let i = 0 . Именно в самой функции и вне данного цикла данная i будет отсутствовать, а это безопасно!
2. Далее мы задаём условие, которое интерпретатор будет проверять перед каждой итерацией цикла (чтобы определить, а стоит ли вообще запускать код по новой). Итерацией называют один виток цикла (например, если у нас было 10 циклов запуска, то можно сказать, что имели место 10 итераций кода).
3. Третьей частью нашего кода является инкремент ++ (или же декремент -- ). Он запускается в конце каждой итерации, чтобы всякий раз менять нашу переменную .

Заключение​

Практически всегда, когда известно количество необходимых итераций, вы скорее будете работать с for , нежели с while . В связи с этим циклы for так популярны. Существуют и другие циклы, но они не столь популярны и при желании можете познакомиться с ними здесь.

React Native​

Пример использования в React Native приложениях.

Проблемы?​

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:​

Как называется блок кода, повторяющий себя снова и снова, пока заданное условие не перестанет быть истинным?

Какой из двух операторов цикла является более популярным?

Сколько сообщений выдаст в консоль следующий код?

let k = 0 while (k  7)   console.log('ещё строчка!') > 

При помощи какого символа отделяются друг от друга находящиеся в скобках части цикла for ?

Если _______ всегда будет оставаться истинным, то код может застрять в бесконечном _______ .

1. условие/цикле
2. цикл/условии

Как называется среднее _____ из трёх заключённых в скобки частей цикла for ?

Назовите термин, которым обозначается разовое (шаговое) прохождение цикла?

1. Итерация
2. Прерывание
3. Зацикливание

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в нашем телеграм боте.

Ссылки:​

1. MDN web doc. Статья "Цикл do. while"
2. MDN web doc. Статья "Цикл for"
3. MDN web doc. Статья "Цикл while"
4. Статья "Iteration", сайт Javascript Express
5. Статья "Циклы while и for"
6. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz

Contributors ✨​

Thanks goes to these wonderful people (emoji key):

Что такое цикл в javascript

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

Цикл for

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

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

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

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

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

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

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

console.log(i);

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

0 1 2 3 4 Конец работы

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

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

for(let i = 10; i > 5; i--)

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

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

for(let i = 0; i

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

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

let i = 0; for(; i

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

Счетчик удобно использовать как индекс элементов массива и таким образом перебирать массив:

const people = ["Tom", "Sam", "Bob"]; for(let i=0; i

Консольный вывод браузера:

Tom Sam Bob

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

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

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 и y:

i=1, j=1;

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

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

i=2, j=2;

i=2, j=2;

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

i=3, j=3;

i=3, j=3;

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

i=4, j=4;

Выполнение действий в объявлении цикла

Стоит отметит, что третья часть цикла, где обычно происходит изменение счетчика в реальности представляет произвольное действие, которое выполняется после завершения цикла. Так, мы можем написать следующим образом:

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

Здесь не определено блока цикла, а сами действия цикла определены в третьей части заголовка цикла - console.log(i++)

Аналогично в первой части определения цикла - инициализации мы можем выполнять некоторые действия, а не обязательно только объявление счетчика:

let i=0; for(console.log("Init"); i

Здесь определение счетчика вынесено вне цикла, а в инициализационной части цикла на консоль выводится строка. Вывод браузера:

Init 0 1 2 3 4

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

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

for(let i=1; i >

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

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

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

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

const people = [["Tom", 39], ["Sam", 28],["Bob", 42]]; for(let i=0; i < 3; i++)< // перебираем двухмерный массив for(let j=0; j < 2; j++)< // перебираем вложенные массивы console.log(people[i][j]); >console.log("================ browser"> Tom 39 ================= Sam 28 ================= Bob 42 =================

Цикл while

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

while(условие) < // действия >

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

let i = 1; while(i

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

do..while

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

let i = 1; do< console.log(i); i++; >while(i 
Здесь код цикла сработает 5 раз, пока i не станет равным 5. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.
Операторы continue и break
Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break :
for(let i=1; i console.log("Конец работы");
Данный цикл увеличивает переменную i c 1 до 6 включая, то есть согласно условию цикла блок цикла должен выполняться 6 раз, то есть поизвести 6 итераций. Однако поскольку в блоке цикла происходит поверка if(i===4) break; , то, когда значение переменной i достигнет 4, то данное условие прервет выполнение цикла с помощью оператора break. И цикл заершит работу.
1 2 3 Конец работы
Если нам надо просто пропустить итерацию, но не выходить из цикла, мы можем применять оператор continue . Например, изменим предыдущий пример, только вместо break используем оператор continue :
for(let i=1; i console.log("Конец работы");
В этом случае, когда значение переменная i станет равной 4 , то выражение i===4 возвратит true , поэтому будет выполняться конструкция if(i===4) continue; . С помощью оператора continue она завершит текущую итерацию, далее идущие инструкции цикла не будут выполняться, а произойдет переход к следующей итерации:
1 2 3 5 6 Конец работы
for..in
Цикл for..in предназначен главным образом для перебора объектов. Его формальное определение:
for (свойство in объект) < // действия >
Этот цикл перебирает все свойства объекта. Например:
const person = ; for(prop in person)
Здесь перебирается объект person, который имеет два свойства - name и age. Соответственно на консоли мы увидим:
name age
Получив свойтсва и используя специальный синтаксис объект[свойство] , мы можем получить значение каждого свойства:
const person = ; for(prop in person)
name Tom age 37
Цикл for. of
Цикл for. of предназначен для перебора наборов данных. Например, строка представляет фактически набор символов. И мы можем перебрать ее с помощью данного цикла:
const text = "Hello"; for(char of text)
В итоге цикл перебирает все символы строки text и помещает каждый текущий символ в переменную ch , значение которой затем выводится на консоль.
H e l l o
Другим примером может быть перебор массива:
const people = ["Tom", "Sam", "Bob"]; for(const person of people)
В данном случае цикл перебирает элементы массива people. Каждый элемент последовательно помещается в константу person . И далее мы можем вывести ее значение на консоль:


Похожие публикации:

Как вынуть встроенную микроволновку
Как подтянуть шкворня на уаз патриот своими руками видео
Как удалить диск в windows 10
Какая последняя версия php