Какие циклы существуют в языке 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 удалить свойство, которое еще не было перечислено, это свойство перечислено не будет. Если в теле цикла создать новые свойства, то обычно такие свойстве не будут перечислены. (Однако некоторые реализации могут перечислять унаследованные свойства, добавленные в ходе выполнения цикла.)

Циклы и итерации

Циклы - простой способ сделать какое-то действие несколько раз. Эта глава руководства JavaScript Guide познакомит вас с различными операторами доступными в JavaScript.

Вы можете представить цикл в виде компьютеризированной версии игры, где вы говорите кому-то сделать X шагов в одном направлении, затем Y шагов в другом; для примера, идея игры "Иди 5 шагов на восток" может быть выражена в виде цикла:

var step; for (step = 0; step  5; step++)  // Запускается 5 раз, с шагом от 0 до 4. console.log("Идём 1 шаг на восток"); > 

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

Операторы предназначенные для организации циклов в JavaScript:

Цикл for

Цикл for повторяет действия, пока не произойдёт какое-либо специальное событие завершения цикла. Оператор for в JavaScript аналогичен оператору for в Java и C. Объявление оператора for выглядит следующим образом:

for ([начало]; [условие]; [шаг]) выражения

При его выполнении происходит следующее:

1. Выполняется выражение начало , если оно указано. Это выражение обычно инициализирует один или несколько счётчиков, но синтаксис позволяет выражению быть любой сложности. Также используется для объявления переменных.
2. Выполняется условие . Если условие истинно, то выполняются выражения . Если оно ложно, цикл for прерывается. Если же условие полностью пропущено, то оно считается истинным.
3. Выполняются выражения . Чтобы выполнить несколько выражений, используются блок-выражение < . >для группировки выражений.
4. Обновляется шаг , если он есть, а затем управление возвращается к шагу 2.

Пример

form name="selectForm"> p> label for="musicTypes" >Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже:label > select id="musicTypes" name="musicTypes" multiple="multiple"> option selected="selected">R&Boption> option>Jazzoption> option>Bluesoption> option>New Ageoption> option>Classicaloption> option>Operaoption> select> p> p>input id="btn" type="button" value="Как много выбрано?" />p> form> script> function howMany(selectObject)  var numberSelected = 0; for (var i = 0; i  selectObject.options.length; i++)  if (selectObject.options[i].selected)  numberSelected++; > > return numberSelected; > var btn = document.getElementById("btn"); btn.addEventListener("click", function ()  alert("Выбрано элементов: " + howMany(document.selectForm.musicTypes)); >); script> 

Цикл do. while

Цикл do. while повторяется пока заданное условие истинно. Оператор do. while имеет вид:

do выражения while (условие);

выражения выполняются пока условие истинно. Чтобы использовать несколько выражений, используйте блок-выражение < . >, чтобы сгруппировать их. Если условие истинно, выражения выполнятся снова. В конце каждого прохода условие проверяется. Если условие ложно, выполнение приостанавливается и управление передаётся выражению после do. while .

Пример

В следующем примере, цикл do выполнится минимум 1 раз и запускается снова, пока i меньше 5.

do  i += 1; console.log(i); > while (i  5); 

Цикл while

Цикл while выполняет выражения пока условие истинно. Выглядит он так:

while (условие) выражения

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

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

Чтобы использовать несколько выражений, используйте блок выражение < . >, чтобы сгруппировать их.

Пример 1

Следующий цикл while работает, пока n меньше трёх:

var n = 0; var x = 0; while (n  3)  n++; x += n; > 

С каждой итерацией, цикл увеличивает n и добавляет это значение к x . Поэтому, x и n получают следующие значения:

• После первого прохода: n = 1 и x = 1
• После второго: n = 2 и x = 3
• После третьего прохода: n = 3 и x = 6

Пример 2

Избегайте бесконечных циклов. Убедитесь, что условие цикла в итоге станет ложным; иначе, цикл никогда не прервётся. Выражения в следующем цикле while будут выполняться вечно, т.к. условие никогда не станет ложным:

while (true)  console.log("Hello, world"); > 

Метка (label)

Метка представляет собой оператор с идентификатором, который позволяет вам ссылаться на какое-то место в вашей программе. Например, вы можете использовать метку, чтобы обозначить цикл, а затем использовать операторы break или continue , чтобы указать, должна ли программа прерывать цикл или продолжать его выполнение.

Синтаксис метки следующий:

метка : оператор

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

Пример

В этом примере, метка markLoop обозначает цикл while .

markLoop: while (theMark == true)  doSomething(); > 

break

Используйте оператор break , чтобы прерывать цикл, переключать управление или в сочетании с оператором метка.

• Когда вы используете break без метки, он прерывает циклы while , do-while и for или сразу переключает управление к следующему выражению.
• Когда вы используете break с меткой, он прерывает специально отмеченное выражение.

Синтаксис оператора может быть таким:

Первая форма синтаксиса прерывает цикл совсем или переключает управление; вторая прерывает специально обозначенное выражение.

Пример 1

Следующий пример проходит по элементам в массиве, пока не найдёт элемент, чьё значение - theValue :

for (i = 0; i  a.length; i++)  if (a[i] == theValue)  break; > > 

Пример 2: Прерывание метки

var x = 0; var z = 0; labelCancelLoops: while (true)  console.log("Внешний цикл: " + x); x += 1; z = 1; while (true)  console.log("Внутренний цикл: " + z); z += 1; if (z === 10 && x === 10)  break labelCancelLoops; > else if (z === 10)  break; > > > 

continue

Оператор continue используется, чтобы шагнуть на шаг вперёд в циклах while , do-while , for или перейти к метке.

• Когда вы используете continue без метки, он прерывает текущую итерацию циклов while , do-while и for и продолжает выполнение цикла со следующей итерации. В отличие от break , continue не прерывает выполнение цикла полностью. В цикле while он прыгает к условию. А в for увеличивает шаг .
• Когда вы используете continue с меткой, он применяется к циклу с этой меткой.

Синтаксис continue может выглядеть так:

1. continue;
2. continue Метка ;

Пример 1

Следующий пример показывает цикл while с оператором continue , который срабатывает, когда значение i равно 3. Таким образом, n получает значения 1, 3, 7 и 12.

var i = 0; var n = 0; while (i  5)  i++; if (i == 3)  continue; > n += i; > 

Пример 2

Выражение, отмеченное checkiandj содержит выражение отмеченное checkj . При встрече с continue , программа прерывает текущую итерацию checkj и начинает следующую итерацию. Каждый раз при встрече с continue , checkj переходит на следующую итерацию, пока условие возвращает false . Когда возвращается false , после вычисления остатка от деления checkiandj , checkiandj переходит на следующую итерацию, пока его условие возвращает false . Когда возвращается false , программа продолжает выполнение с выражения после checkiandj .

Если у continue проставлена метка checkiandj , программа может продолжиться с начала метки checkiandj .

checkiandj: while (i  4)  console.log(i); i += 1; checkj: while (j > 4)  console.log(j); j -= 1; if (j % 2 != 0)  continue checkj; > console.log(j + " чётное."); > console.log("i token operator">+ i); console.log("j token operator">+ j); > 

for. in

Оператор for. in проходит по всем перечислимым свойствам объекта. JavaScript выполнит указанные выражения для каждого отдельного свойства. Цикл for. in выглядит так:

for (variable in object)

Пример

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

function dump_props(obj, obj_name)  var result = ""; for (var i in obj)  result += obj_name + "." + i + " token operator">+ obj[i] + "
"; > result += "
"; return result; > 

Для объекта car со свойствами make и model , результатом будет:

.make = Ford; car.model = Mustang; 

Пример №2

Также, по ключу можно выводить значение:

let obj = for (key in obj) < console.log(`$= $`); > // model = AUDI A8 // year = 2019 // color = brown

Массивы

Хотя, очень заманчиво использовать for. in как способ пройтись по всем элементам Array , этот оператор возвращает имя свойств определённых пользователем помимо числовых индексов. Таким образом лучше использовать стандартный for для числовых индексов при взаимодействии с массивами, поскольку оператор for. in проходит по определённым пользователем свойствам в дополнение к элементам массива, если вы изменяете массив, например, добавляете свойства и методы.

Пример

let arr = ['AUDI A8', '2019', 'brown']; arr.cost = '$100.000'; for (key in arr) < console.log(`$= $`); > // 0 = AUDI A8 // 1 = 2019 // 2 = brown // cost = $100.000

for. of

Оператор for. of создаёт цикл, проходящий по перечислимым объектам (en-US) (включая Array , Map (en-US), Set , объект arguments (en-US) и так далее), вызывая на каждой итерации функцию с выражениями, которые надо выполнить для получения значения каждого отдельного свойства.

for (variable of object)

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

let arr = [3, 5, 7]; arr.foo = "hello"; for (let i in arr)  console.log(i); // выводит "0", "1", "2", "foo" > for (let i of arr)  console.log(i); // выводит "3", "5", "7" > 

• « Предыдущая статья
• Следующая статья »

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

JavaScript Цикл For

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

Часто это бывает при работе с массивами:

Вместо того чтобы писать:

text += cars[0] + "
";
text += cars[1] + "
";
text += cars[2] + "
";
text += cars[3] + "
";
text += cars[4] + "
";
text += cars[5] + "
";

Вы можете написать проще:

var i;
for (i = 0; i < cars.length; i++) <
text += cars[i] + "
";
>

Различные виды циклов

JavaScript поддерживает разные циклы:

• for - перебирает через блок кода несколько раз
• for/in - перебирает свойства объекта
• for/of - перебирает значения итеративного объекта
• while - перебирает блок кода, пока выполняется указанное условие
• do/while - также перебирает блок кода, пока выполняется указанное условие

Цикл for

Цикл for имеет следующий синтаксис:

for (statement 1; statement 2; statement 3) // блок кода, который нужно выполнить
>

Оператор 1 выполняется (один раз) перед выполнением блока кода

Оператор 2 определяет условие выполнения блока кода.

Оператор 3 выполняется (каждый раз) после выполнения блока кода.

Пример

for (i = 0; i < 5; i++) <
text += "Число является " + i + "
";
>

Из приведенного выше примера вы можете прочитать:

Оператор 1 устанавливает переменную перед началом цикла (var i = 0).

Оператор 2 определяет условие запуска цикла я должен быть меньше 5 (i < 5).

Оператор 3 увеличивает значение (i++) каждый раз, когда выполняется блок кода в цикле.

Оператор 1

Обычно вы используете оператор 1 для инициализации переменной, используемой в цикле (i = 0).

Это не всегда так, JavaScript не волнует. Оператор 1 не является обязательным.

Вы можете инициировать множество значений в оператор 1 (разделенных запятыми):

Пример

for (i = 0, len = cars.length, text = ""; i < len; i++) <
text += cars[i] + "
";
>

И вы можете пропустить оператор 1 (например, когда ваши значения установлены до начала цикла):

Пример

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) <
text += cars[i] + "
";
>

Оператор 2

Часто оператор 2 используется для оценки состояния исходной переменной.

Это не всегда так, JavaScript не волнует. Оператор 2 также необязателен.

Если оператор 2 вернет true, цикл начнется заново, если он вернет false, цикл завершится.

Если вы пропустите оператор 2, вы должны указать break (прерывание) внутри цикла. В противном случае цикл будет постоянно повторяттся и никогда не закончится. Это приведёт к зависанию браузера. Читайте о прерываниях в следующих главах этого руководства.

Оператор 3

Часто оператор 3 увеличивает значение начальной переменной.

Это не всегда так, JavaScript все равно, и оператор 3 необязателен.

Оператор 3 может делать что угодно, например отрицательное приращение (i--), положительное приращение (i = i + 15) или что-то еще.

Оператор 3 также можно пропустить (например, когда вы увеличиваете значения внутри цикла):

Пример

var i = 0;
var len = cars.length;
for (; i < len; ) <
text += cars[i] + "
";
i++;
>

Цикл for/in

JavaScript оператор for/in перебирает свойства объекта:

Пример

var text = "";
var x;
for (x in person) text += person[x];
>

Цикл for/of

JavaScript оператор for/of перебирает значения итерируемых объектов.

Цикл for/of позволяет перебирать итерируемые структуры данных, такие как массивы, строки, карты, списки узлов Node и т.д.

Цикл for/of имеет следующий синтаксис:

for (variable of iterable) // блок кода будет выполняться
>

variable - Для каждой итерации переменной присваивается значение следующего свойства. Переменная может быть объявлена с const , let , или var .

iterable - Объект, имеющий итерируемые свойства.

Цикл массива

Пример

var cars = ["БМВ", "Вольво", "Мини"];
var x;

for (x of cars) document.write(x + "
");
>

Цикл строк

Пример

var txt = "JavaScript";
var x;

Цикл while (в то время, как)

Цикл while и do/while будет объяснен в следующей главе.

Мы только что запустили
SchoolsW3 видео

#8 – Циклы в JavaScript. Операторы циклов

За счет циклов вы можете создавать код, что будет циклично выполнен определенное количество раз. Мы в уроке рассмотрим создание циклов в языке JavaScript. Мы изучим циклы: for, while и do while. Дополнительно нами будут изучены операторы для циклов.

Видеоурок

В языке JavaScript, как и в большинстве других языков, существует 3 основных вида циклов. Каждый из них выполняет одну и ту же роль, но записывается по-разному. Рассмотрим все три цикла.

Цикл For

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

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

В объявлении цикла записывается следующее: переменная цикла, её начальное значение и диапазон. В примере выше будут выведены числа от 0 до 10.

Если в теле цикла всего одна строка кода, то фигурные скобки можно пропустить и не записывать их.

Цикл While

Суть цикла while не особо отличается от цикла for . Единственное отличие заключается в способе записи цикла. В while необходимо прописать лишь условие, а все остальные параметры записываются вне цикла:

var i = 1; // Создание переменной while (i 

Цикл Do While

Цикл схож с циклом while по форме написания, но при этом работает немного по-другому. Цикл do..while будет выполнен один раз сто процентов, а дальше проверит условие и если оно верно, то цикл будет выполняться дальше:

var x = 13; do < x--; console.log(x); >while (x > 10);

Как видно из примера, цикл изначально неверный, но это не мешает ему сработать один раз.

Операторы для работы в циклах

Существует три основных оператора для работы в циклах:

• Оператор break - служит для выхода из цикла полностью;

• Оператор continue - пропускает лишь одну итерацию и не выходит из цикла.

Весь код будет доступен после подписки на проект!