• Назад
• Далее

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

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

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

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

Операторы предназначенные для организации циклов в #"#цикл_for">Цикл_for

Циклfor

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

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

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

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

Пример

В следующей функции есть циклfor, который считает количество выбранных жанров в списке прокрутки (элемент<select>, который позволяет выбрать несколько элементов). Циклfor объявляет переменнуюi и задаёт ей значение 0. Также он проверяет, чтоi меньше количества элементов в элементе<select>, выполняет операторif и увеличиваетi на один после каждого прохода цикла.

<form name="selectForm">  <p>    <label for="musicTypes"      >Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже:</label    >    <select name="musicTypes" multiple="multiple">      <option selected="selected">R&B</option>      <option>Jazz</option>      <option>Blues</option>      <option>New Age</option>      <option>Classical</option>      <option>Opera</option>    </select>  </p>  <p><input 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

После третьего прохода, условиеn < 3 становится ложным, поэтому цикл прерывается.

Пример 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. break;
2. 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 = " + i);  console.log("j = " + 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 + " = " + obj[i] + "<br>";  }  result += "<hr>";  return result;}

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

car.make = Ford;car.model = Mustang;

Пример №2

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

let obj = {model: 'AUDI A8', year: '2019', color: 'brown'}for (key in obj) {  console.log(`${key} = ${obj[key]}`);}// 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(`${key} = ${arr[key]}`);}// 0 = AUDI A8// 1 = 2019// 2 = brown// cost = $100.000

for...of

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

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

• Назад
• Далее