Javascript выход из цикла for. Циклы for в JavaScript

Циклы - простой способ сделать какое-то действие несколько раз. Эта глава руководства 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 ([начало]; [условие]; [шаг]) выражения

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

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

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

    Выберите некоторые жанры музыки, а затем нажмите на кнопку ниже: R&B Jazz Blues New Age Classical Opera

    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)) });

    Цикл 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 с меткой, он прерывает специально отмеченное выражение.

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

  • break;
  • 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 может выглядеть так:

  • continue;
  • 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] + "
    "; } result += ""; 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}`); } // model = AUDI A8 // year = 2019 // color = brown

    Массивы

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

    For (variable of object ) { выражения }

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

    Let arr = ; 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" }

    Цикл - это управляющая инструкция, позволяющая повторять выполнение программного кода определённое количество раз. Каждое отдельное исполнение инструкций в теле цикла называется итерацией .

    Цикл while

    Синтаксис цикла while:

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

    Var i = 0; while (i < 3) { // Выполнять код, пока значение переменной i меньше 3 alert("i: " + i); i++; // Увеличиваем значение переменной i }

    Цикл do-while

    Синтаксис цикла do-while:

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

    Var count = 0; do { document.write(count + " "); count++; } while(count < 5); Попробовать »

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

    Цикл for

    Синтаксис цикла for:

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

  • Первое выражение всегда вычисляется только один раз - перед первой итерацией. Поэтому обычно в качестве первого выражения выступает определение переменной, которая используется в условии выполнения цикла в качестве счётчика.
  • Второе выражение определяет условие выполнения цикла. Оно вычисляется перед каждой итерацией и определяет, будет ли выполняться тело цикла. Если результатом вычисления выражения является истинное значение, программный код в теле цикла выполняется. Если возвращается ложное значение, выполнение цикла завершается и управление переходит к следующей после цикла инструкции. Если при первой проверке условия, оно оказывается ложным, код в теле цикла не выполнится ни разу.
  • После каждой итерации вычисляется третье выражение. Обычно его используют для изменения значения переменной, которая используется в проверке условия выполнения цикла.
  • Пример цикла for:

    For (var count = 0; count < 5; count++) document.write(count + " "); Попробовать »

    Как видно из примера, цикл for в отличие от других циклов позволяет сгруппировать связанный с циклом код в одном месте.

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

    Var i = 0; for (; i < 4; i++) ... var i = 0; for (; i < 4;) ... for (var i = 1; /* нет условия */ ; i++) ... // Это эквивалентно следующему коду for (var i = 1; true; i++) ...

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

    // не выполнится, так как в проверке условия последнее выражение false for (i = 1; i < 4, false; i++) ... for (var i = 1, j = 5; i 50) break;
    ++i;
    }

    В этом примере мы прерываем выполнение цикла, если значение переменной a превысит 50.

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

    Пример:

    while (a < 100) {
    i = ++i;
    if (i > 9 && i < 11) continue;
    a = a * i + 2;
    }

    Здесь мы пропускаем выражение, вычисляющее a , для всех значений i от 10 до 20.