Вывод элементов цикла через определенное время javascript. Положение JavaScript в пространстве кода

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

Его конструкция выглядит так:

For (начало; условие; шаг) { /* тело цикла */ }

Всё на самом деле просто. Давайте рассмотри пример:

Var i; for (i = 1; i

В этом примере:

  • Начало цикла : i = 1 (начиная со значения i = 1)
  • Условие цика : i
  • Шаг цикла : i++ (при каждом шаге цикла i увеличивать на 1)
  • Тело цикла : document.write("

    Выполняется шаг цикла номер:" + "

    "); (выводить на экран сообщение)

Пошаговый алгоритм выполнения этого цикла for, более детально:

  • Начало цикла: переменной i присваивается значение 1. Эта часть цикла выполняется один раз.
  • Проверяется условие цикла (i 5) - конец цикла.
  • Выполняется тело цикла.
  • Выполняется шаг цикла. В шашем случае i++. Он всегда выполняется после тела цикла.
  • Возвращение на пункт 2.

    • Если тело цикла состоит из одной инструкции, то фигурные скобки {...} ставить не обязательно.

    Переменная i после завершения цикла не исчезает. Она продолжает существовать и её значение после завершения цикла будет равно 6.

    Давайте обощим эти данные в новом примере:

    Var i; for (i = 1; i

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

    Фигурные скобки {...} образуют блок в JavaScript - это одна из консрукций языка. То есть, если после оператора цикла for стоят фигурные скобки, это значит что обработчик JavaScript должен выполнить весь блок JavaScript.

    Аналогично блоку, в цикле for можно указать функцию. Вот пример:

    For (var i = 1; i

    Но вот при объявлении функции фигурные скобки {...} обязательны. Их отсутствие приведёт к ошибке.

    Обратите внимание, в этом цикле переменная i объявлена в начале цикла: for (var i = 1 ; i

    Пропуск частей for

    Вообще, начало цикла можно и не прописывать:

    Var i = 1; for (; i

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

    Также можно убрать шаг:

    Var i = 1; for (; i

    Этот цикл for превратился в аналог цикла while (i

    В условие можно поставить выражение, изменяющее переменную.

    For (i = 10; i--;) { document.write("

    Выполняется шаг цикла: " + i + ".

    "); }

    Так как интерпретатор JavaScript когда ожидает получить логическое значение, любое значение приводит к логическому типу, то когда в результате очередного дикремента переменная i станет равной 0 (ложь), цикл остановится.

    Безконечный цикл for

    Да, да, я знаю что правильно писать бесконечный:)

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

    For (var i = 1; i

    В этом примере переменная i будет уменьшаться и никогда не станет больше пяти. Цикл будет выполняться вечно. Попробуйте запустить этот скрипт. У меня Хром "задумался" и ничего не выдал на экран, а продолжал думать и думать.

    Будте внимательны и избегайте случайного создания безконечных циклов.

    Прерывание цикла for

    Для прерывания цикла for, как и для прерывания любого другого цикла, используется команда break . Когда обработчик JavaScript обнаруживает команду break в теле цикла, он останавливает выполнения цикла и начинает выполнять инструцкии сценария, следующие за циклом. если такие имеются.

    В следующем примере мы остановим цикл на третьей итерации (третьем шаге).

    For (var i = 1; i

    Немного усложним пример

    Выполним только 100 итераций безконечного цикла.

    Var $counter = 1; for (var i = 1; i

    Следующая итерация: continue

    Команда continue завершает текущую итерацию и начинает выполнять следующую.

    Директива continue «младшая сестра» директивы break, она останавливает только итерацию, а не весь цикл.

    For (var i = 1; i

    Цикл ниже использует continue , чтобы выводить нечетные значения:

    For (var i = 0; i

    Конечно, нечётные значения можно вывести при помощи такого цикла без директивы continue :

    For (var i = 0; i

    Директивы break / continue в операторе "?"

    Давайте кратко опишем оператор вопросительный знак "? ". Он похож на конструкцию if .

    Логическая конструкция:

    If (условие) { a(); } else { b(); }

    Работает также, как и код с оператором "? ".

    Условие? a() : b(); var i = 2; document.write("

    Часть 1.

    "); if (i == 2) document.write("

    Условие сработало.

    "); else document.write("

    Условие не сработало.

    "); document.write("

    Часть 2.

    "); i == 2 ? document.write("

    Условие сработало.

    ") : document.write("

    Условие не сработало.

    ");

    Так вот, важно , нельзя использовать break/continue справа от оператора "? "

    В JavaScript синтаксические конструкции, не возвращающие значений, запрещено использовать в операторе "? ".

    Нижний пример не рабочий, в нём содержится ошибка:

    For (var i = 0; i

    Метки для break / continue

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

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

    Метки - единственный способ для команд break и continue повлиять на выполнение внешнего цикла.

    Инструкция метки (англ. label) используется только вместе с break или continue для альтернативного выхода из цикла.

    Метка имеет синтаксис "имя:", имя метки должно быть уникальным. Метка ставится перед циклом, в той же строке или с переносом строки.

    Аналогично можно в этом месте использовать директиву break . Но в случае её использования, как вы понимаете, выполнение циклов прекратится.

    Var i, j; metka1: for (i = 0; i

    В языке JavaScript нет оператора goto , как в PHP, возможно использовать только метки с break или continue .

    Метки редко используются при программировании на JavaScript, так как считается что они делают код сложнее в чтении ипонимании. При кодировании рекомендуется использовать функции.

    Что отступы можно считать показателем сложности кода (хотя и довольно грубым). Сами по себе отступы нейтральны, так как они – лишь средство форматирования текста, но всё дело в том, что они используются для выделения особых блоков программ, например – управляющих конструкций. Читая код и натыкаясь на отступ, программист вынужден принимать во внимание то, на что указывает отступ, держать в памяти контекст, в котором существует выделенный блок. Это, естественно, повторяется, если в выделенном отступами участке кода появляется ещё один особый фрагмент.

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


    Чем больше отступов – тем сложнее обычно и код

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

    Возьмём, например, массивы. Традиционно для их обработки используют различные виды циклов. Понятия «массив» и «цикл» неразрывно связаны в сознании многих программистов. Однако цикл – конструкция весьма неоднозначная. Вот что пишет о циклах Луис Атенцио в книге «Функциональное программирование в JavaScript »: «Цикл – это жёсткая управляющая конструкция, которую нелегко использовать повторно и сложно состыковать с другими операциями. Кроме того, использование циклов означает появление кода, который меняется с каждой итерацией.»


    Можно ли избавиться от циклов?

    Цикл – одна из основных структурных управляющих конструкций, и, собственно, мы не собираемся говорить о том, что циклы – это зло, от которого надо избавляться. Наша главная цель заключается в снижении сложности собственного кода за счёт минимального использования циклов при обработке массивов. Возможно ли это? Предлагаем выяснить вместе.

    Циклы Мы уже говорили о том, что управляющие конструкции, вроде циклов, усложняют код. Но почему это так? Взглянем на то, как работают циклы в JavaScript.

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

    // oodlify:: String -> String function oodlify(s) { return s.replace(//g, "oodle"); } const input = [ "John", "Paul", "George", "Ringo", ];
    Итак, имеется массив, каждый элемент которого мы собираемся обработать с помощью функции oodlify . Если использовать для решения этой задачи цикл while , получится следующее:

    Let i = 0; const len = input.length; let output = ; while (i < len) { let item = input[i]; let newItem = oodlify(item); output.push(newItem); i = i + 1; }
    Обратите внимание на то, что мы, для того, чтобы отслеживать текущий обрабатываемый элемент массива, используем счётчик i . Необходимо инициализировать его нулём и увеличивать на единицу в каждой итерации цикла. Кроме того, нужно сравнивать его с длиной массива, с len , для того, чтобы знать, когда надо прекратить работу.

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

    Const len = input.length; let output = ; for (let i = 0; i < len; i = i + 1) { let item = input[i]; let newItem = oodlify(item); output.push(newItem); }
    Цикл for – полезная конструкция, так как благодаря ей все стандартные вспомогательные операции со счётчиком выносятся в верхнюю часть блока. Используя while , легко забыть о необходимости инкрементировать счётчик i , что приведёт к запуску бесконечного цикла. Определённо, цикл for гораздо удобнее цикла while . Но давайте притормозим и взглянем на то, чего пытается достичь наш код. Мы хотим обработать, с помощью функции oodlify() , каждый элемент массива и поместить то, что получилось, в новый массив. Сам по себе счётчик, используемый для доступа к элементам массива, нас не интересует.

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

    Let output = ; for (let item of input) { let newItem = oodlify(item); output.push(newItem); }
    Код выглядит гораздо чище. Обратите внимание на то, что тут нет ни счётчика, ни операции сравнения. При таком подходе даже не нужно обращаться к конкретному элементу массива по индексу. Цикл for…of берёт на себя все вспомогательные операции.

    Если завершить на этом исследование способов работы с массивами и применять циклы for…of везде вместо циклов for , это уже будет неплохим шагом вперёд за счёт упрощения кода. Но… мы можем пойти дальше.

    Трансформация массивов Цикл for…of выглядит гораздо чище, чем цикл for , но и с ним в коде имеется немало вспомогательных элементов. Так, надо инициализировать массив output и в каждой итерации цикла вызывать метод push() . Код можно сделать ещё более компактным и выразительным, но прежде чем этим заняться, давайте немного расширим демонстрационную задачу. Как быть, если с помощью функции oodlify() надо обработать два массива?

    Const fellowship = [ "frodo", "sam", "gandalf", "aragorn", "boromir", "legolas", "gimli", ]; const band = [ "John", "Paul", "George", "Ringo", ];
    Вполне очевидное решение – использовать два цикла и обработать массивы в них:

    Let bandoodle = ; for (let item of band) { let newItem = oodlify(item); bandoodle.push(newItem); } let floodleship = ; for (let item of fellowship) { let newItem = oodlify(item); floodleship.push(newItem); }
    Вполне рабочий вариант. А код, который работает – это гораздо лучше, чем код, который не решает поставленную перед ним задачу. Но два очень похожих фрагмента кода не особенно хорошо согласуются с принципом разработки ПО DRY . Код можно подвергнуть рефакторингу для того, чтобы снизить число повторений.

    Следуя этой идее, создаём такую функцию:

    Function oodlifyArray(input) { let output = ; for (let item of input) { let newItem = oodlify(item); output.push(newItem); } return output; } let bandoodle = oodlifyArray(band); let floodleship = oodlifyArray(fellowship);
    Выглядит это гораздо лучше, но что, если имеется ещё одна функция, с помощью которой мы тоже хотим обрабатывать элементы массивов?

    Function izzlify(s) { return s.replace(/+/g, "izzle"); }
    Теперь функция oodlifyArray() не поможет. Однако, если создать ещё одну подобную функцию, на этот раз – izzlufyArray() , мы опять повторимся. Всё же, создадим такую функцию и сравним её с oodlifyArray() :

    Function oodlifyArray(input) { let output = ; for (let item of input) { let newItem = oodlify(item); output.push(newItem); } return output; } function izzlifyArray(input) { let output = ; for (let item of input) { let newItem = izzlify(item); output.push(newItem); } return output; }
    Эти две функции невероятно похожи. Может быть, обобщим шаблон, которому они следуют? Наша цель заключается следующем: «Имеются массив и функция. Нужно получить новый массив, в который будут записаны результаты обработки каждого из элементов исходного массива с помощью функции». Подобный способ обработки массивов называют «отображением» или «трансформацией» (mapping в англоязычной терминологии). Функции, которые выполняют подобные операции, обычно называют «map». Вот как выглядит наш вариант такой функции:

    Function map(f, a) { let output = ; for (let item of a) { output.push(f(item)); } return output; }
    Хотя цикл теперь и вынесен в отдельную функцию, совсем избавиться от него не получилось. Если пойти до конца и попытаться обойтись совсем без циклических конструкций, можно написать рекурсивный вариант того же самого:

    Function map(f, a) { if (a.length === 0) { return ; } return .concat(map(f, a.slice(1))); }
    Рекурсивное решение выглядит весьма элегантно. Всего пара строчек кода и минимум отступов. Но рекурсивные реализации алгоритмов обычно используют с большой осторожностью, кроме того, они отличаются плохой производительностью в старых браузерах. И, на самом деле, нам совершено не нужно самим писать функцию реализации операции отображения, если только на то нет веской причины. То, что делает наша функция map – задача настолько распространённая, что в JavaScript имеется встроенный метод map() . Если воспользоваться этим методом, код окажется вот таким:

    Let bandoodle = band.map(oodlify); let floodleship = fellowship.map(oodlify); let bandizzle = band.map(izzlify); let fellowshizzle = fellowship.map(izzlify);
    Обратите внимание на то, что здесь вообще нет ни отступов, ни циклов. Конечно, при обработке данных, где-то в недрах JavaScript, могут использоваться циклы, но это уже – не наша забота. Теперь код получился и сжатым, и выразительным. Кроме того, он проще.

    Почему этот код проще? Может показаться, что вопрос это глупый, но подумайте об этом. Он проще потому что он короче? Нет. Компактность кода – это не признак простоты. Он проще потому что при таком подходе мы разбили задачу на части. А именно, есть две функции, которые работают со строками: oodlify и izzlify . Эти функции не должны ничего знать о массивах или о циклах. Имеется ещё одна функция – map , которая работает с массивами. При этом ей совершенно безразлично, какого типа данные в массиве, или то, что именно мы хотим с этими данными делать. Она просто исполняет любую переданную ей функцию, передавая ей элементы массива. Вместо того, чтобы всё смешивать, мы разделили обработку строк и обработку массивов. Именно поэтому итоговый код оказался проще.

    Свёртка массивов Итак, функция map весьма полезна, но она не перекрывает все варианты обработки массивов, в которых используются циклы. Она хороша в случаях, когда на основе некоего массива нужно создать новый, имеющий ту же длину. Но что, если нам нужно, например, сложить все элементы числового массива? Или, если надо найти самую короткую строку в списке? Иногда требуется обработать массив и, фактически, сформировать на его основе одно значение.

    Рассмотрим пример. Предположим, имеется список объектов, каждый из которых представляет супергероя:

    Const heroes = [ {name: "Hulk", strength: 90000}, {name: "Spider-Man", strength: 25000}, {name: "Hawk Eye", strength: 136}, {name: "Thor", strength: 100000}, {name: "Black Widow", strength: 136}, {name: "Vision", strength: 5000}, {name: "Scarlet Witch", strength: 60}, {name: "Mystique", strength: 120}, {name: "Namora", strength: 75000}, ];
    Надо найти самого сильного героя. Для того, чтобы это сделать, можно воспользоваться циклом for…of:

    Let strongest = {strength: 0}; for (let hero of heroes) { if (hero.strength > strongest.strength) { strongest = hero; } }
    Учитывая все обстоятельства, этот код не так уж и плох. Мы обходим в цикле массив, храня объект самого сильного из просмотренных героев в переменной strongest . Для того, чтобы яснее увидеть шаблон работы с массивом, представим, что ещё надо выяснить общую силу всех героев.

    Let combinedStrength = 0; for (let hero of heroes) { combinedStrength += hero.strength; }
    В каждом из этих двух примеров имеется рабочая переменная, которую инициализируют перед запуском цикла. Затем, в каждой итерации, обрабатывают один элемент массива и обновляют переменную. Для того, чтобы выделить схему работы ещё лучше, вынесем операции, выполняемые внутри циклов, в функции, и переименуем переменные для того, чтобы подчеркнуть схожесть производимых действий.

    Function greaterStrength(champion, contender) { return (contender.strength > champion.strength) ? contender: champion; } function addStrength(tally, hero) { return tally + hero.strength; } const initialStrongest = {strength: 0}; let working = initialStrongest; for (hero of heroes) { working = greaterStrength(working, hero); } const strongest = working; const initialCombinedStrength = 0; working = initialCombinedStrength; for (hero of heroes) { working = addStrength(working, hero); } const combinedStrength = working;
    Если всё переписано так, как показано выше, два цикла оказываются очень похожими. Единственное, что их отличает – это вызываемые в них функции и начальные значения переменных. В обоих циклах массив сворачивается до одного значения. В англоязычной терминологии такая операция называется «reducing». Поэтому создадим функцию reduce , реализующую обнаруженный шаблон.

    Function reduce(f, initialVal, a) { let working = initialVal; for (let item of a) { working = f(working, item); } return working; }
    Надо отметить, что, как и в случае с шаблоном функции map , шаблон функции reduce распространён так широко, что JavaScript предоставляет его в качестве встроенного метода массивов. Поэтому свой метод, если на это нет особой причины, писать не нужно. С использованием стандартного метода код будет выглядеть так:

    Const strongestHero = heroes.reduce(greaterStrength, {strength: 0}); const combinedStrength = heroes.reduce(addStrength, 0);
    Если присмотреться к итоговому результату, можно обнаружить, что получившийся код ненамного короче того, что был раньше, экономия совсем невелика. Если бы мы использовали функцию reduce , написанную самостоятельно, то, в целом, код получился бы больше. Однако, наша цель заключается не в том, чтобы писать короткий код, а в том, чтобы уменьшать его сложность. Итак, уменьшили ли мы сложность программы? Могу утверждать, что уменьшили. Мы отделили код циклов от кода, который обрабатывает элементы массива. В результате отдельные участки программы стали более независимыми. Код получился проще.

    На первый взгляд функция reduce может показаться довольно примитивной. В большинстве примеров использования этой функции демонстрируются простые вещи, вроде сложения всех элементов числовых массивов. Однако, нигде не сказано, что значение, которое возвращает reduce , должно быть примитивным типом. Это может быть объект или даже другой массив. Когда я впервые это понял, это меня поразило. Можно, например, написать реализацию операции отображения или фильтрации массива с использованием reduce . Предлагаю вам самим это попробовать.

    Фильтрация массивов Итак, имеется функция map для выполнения операций над каждым элементом массива. Есть функция reduce , которая позволяет сжать массив до единственного значения. Но что, если нужно извлечь из массива лишь некоторые его элементы? Для того, чтобы эту идею исследовать, расширим список супергероев, добавим туда некоторые дополнительные данные:

    Const heroes = [ {name: "Hulk", strength: 90000, sex: "m"}, {name: "Spider-Man", strength: 25000, sex: "m"}, {name: "Hawk Eye", strength: 136, sex: "m"}, {name: "Thor", strength: 100000, sex: "m"}, {name: "Black Widow", strength: 136, sex: "f"}, {name: "Vision", strength: 5000, sex: "m"}, {name: "Scarlet Witch", strength: 60, sex: "f"}, {name: "Mystique", strength: 120, sex: "f"}, {name: "Namora", strength: 75000, sex: "f"}, ];
    Теперь предположим, что имеется две задачи:

  • Найти всех героев-женщин.
  • Найти всех героев, сила которых превышает 500.
    • К решению этих задач вполне можно подойти, используя старый добрый цикл for…of:

    Let femaleHeroes = ; for (let hero of heroes) { if (hero.sex === "f") { femaleHeroes.push(hero); } } let superhumans = ; for (let hero of heroes) { if (hero.strength >= 500) { superhumans.push(hero); } }
    В общем-то, выглядит это вполне пристойно. Но тут невооруженным глазом виден повторяющийся шаблон. На самом деле, циклы совершенно одинаковые, различаются они только блоками if . Что если вынести эти блоки в функции?

    Function isFemaleHero(hero) { return (hero.sex === "f"); } function isSuperhuman(hero) { return (hero.strength >= 500); } let femaleHeroes = ; for (let hero of heroes) { if (isFemaleHero(hero)) { femaleHeroes.push(hero); } } let superhumans = ; for (let hero of heroes) { if (isSuperhuman(hero)) { superhumans.push(hero); } }
    Функции, которые возвращают только true или false иногда называют предикатами. Мы используем предикат для принятия решения о том, надо ли сохранить в новом массиве очередное значение из массива heroes .

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

    Function filter(predicate, arr) { let working = ; for (let item of arr) { if (predicate(item)) { working = working.concat(item); } } return working; } const femaleHeroes = filter(isFemaleHero, heroes); const superhumans = filter(isSuperhuman, heroes);
    Здесь, как и в случае со встроенными функциями map и reduce , в JavaScript имеется то же самое, что мы тут написали, в виде стандартного метода filter объекта Array . Поэтому писать собственную функцию, без явной необходимости, не нужно. С использованием стандартных средств код будет выглядеть так:

    Const femaleHeroes = heroes.filter(isFemaleHero); const superhumans = heroes.filter(isSuperhuman);
    Почему такой подход гораздо лучше, чем использование цикла for…of ? Подумайте о том, как этим можно воспользоваться на практике. У нас имеется задача вида: «Найти всех героев, которые…». Как только выяснилось, что можно решить задачу с использованием стандартной функции filter , работа упрощается. Всё, что нужно – сообщить этой функции, какие именно элементы нас интересуют. Делается это через написание одной компактной функции. Не нужно заботиться ни об обработке массивов, ни о дополнительных переменных. Вместо этого мы пишем крошечную функцию-предикат и задача решена.

    И, как и в случае с другими функциями, которые работают с массивами, использование filter позволяет выразить больше информации в меньшем объёме кода. Не нужно читать весь стандартный код цикла для того, чтобы разобраться в том, что именно мы фильтруем. Вместо этого всё, что нужно понять, описано прямо при вызове метода.

    Поиск в массивах Фильтрация – весьма полезная операция. Но что, если надо найти лишь одного супергероя из списка? Скажем, нас интересует Black Widow. Функцию filter вполне можно использовать для решения этой задачи:

    Function isBlackWidow(hero) { return (hero.name === "Black Widow"); } const blackWidow = heroes.filter(isBlackWidow);
    Главная проблема тут заключается в том, что подобное решение не отличается эффективностью. Метод filter просматривает каждый элемент массива. Однако, известно, что в массиве лишь одного героя зовут Black Widow, а это значит, что можно остановиться после того, как этот герой найден. В то же время, функциями-предикатами удобно пользоваться. Поэтому напишем функцию find , которая найдёт и вернёт первый подходящий элемент:

    Function find(predicate, arr) { for (let item of arr) { if (predicate(item)) { return item; } } } const blackWidow = find(isBlackWidow, heroes);
    Тут, опять же, надо сказать, что в JavaScript есть встроенная функция, которая делает в точности то, что нужно:

    Const blackWidow = heroes.find(isBlackWidow);
    В итоге, как и прежде, удалось выразить нашу идею более сжато. С использованием встроенной функции find , задача поиска определённого элемента сводится к одному вопросу: «По какому признаку можно определить, что искомый элемент обнаружен?» При этом не надо беспокоиться о деталях.

    О функциях reduce и filter Читатели заметили, что неэффективно дважды проходиться по списку героев в вышеприведённых примерах к функциям reduce и filter . Использование оператора расширения (spread operator) из ES2015 позволяет удобно скомбинировать две функции, занятых свёрткой массива, в одну. Вот изменённый фрагмент кода, который позволяет проходиться по массиву лишь один раз:

    Function processStrength({strongestHero, combinedStrength}, hero) { return { strongestHero: greaterStrength(strongestHero, hero), combinedStrength: addStrength(combinedStrength, hero), }; } const {strongestHero, combinedStrength} = heroes.reduce(processStrength, {strongestHero: {strength: 0}, combinedStrength: 0});
    Не могу не заметить, что эта версия будет немного сложнее, чем та, в которой по массиву проходились дважды, но, если массив огромен, сокращение числа проходов по нему может оказаться весьма кстати. В любом случае, порядок сложности алгоритма остаётся O(n).

    Итоги Полагаю, представленные здесь функции – это отличный пример того, почему продуманно выбранные абстракции и пользу приносят, и в коде выглядят хорошо. Допустим, что мы используем встроенные функции везде, где это возможно. В каждом случае получается следующее:
  • Мы избавляемся от циклов, что делает код более сжатым и, скорее всего, более лёгким для чтения.
  • Используемый шаблон описывается с использованием подходящего имени стандартного метода. То есть – map , reduce , filter , или find .
  • Масштаб задачи уменьшается. Вместо самостоятельного написания кода для обработки массива, нужно лишь указать стандартной функции на то, что надо с массивом сделать.
    • Обратите внимание на то, что в каждом случае для решения задачи используются компактные чистые функции.

    На самом деле, если обо всём этом задуматься, можно прийти к выводу, который, в первый момент, кажется удивительным. Оказывается, если использовать лишь четыре вышеописанных шаблона обработки массивов, можно убрать из JS-кода практически все циклы. Ведь что делается в практически каждом цикле, написанном на JavaScript? В нём либо обрабатывается, либо конструируется некий массив, либо делается и то и другое. Кроме того, в JS есть и другие стандартные функции для работы с массивами, вы вполне можете изучить их самостоятельно. Избавление от циклов практически всегда позволяет уменьшить сложность программ и писать код, который легче читать и поддерживать.

    Уважаемые 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" }

    Основная цель в JavaScript while — повторно запускать определенный фрагмент кода, снова и снова. Он очень похож на цикл for с одним важным отличием. Позвольте мне занять немного вашего времени, чтобы объяснить разницу между этими двумя типами циклов.

    В чем разница между циклами while и for?

    Разница между этими циклами заключается в том, как они прекращают выполнение фрагмента кода.

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

    В while все происходит по-другому. Цикл while JavaScript выполняется, пока истинно определенное условие. После того, как условие расценивается как ложное, тогда цикл while прекращается.

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

    Плюсы и минусы цикла while

    Позвольте мне начать с рассмотрения единственного существенного «минуса » цикла while . Он может работать вечно!

    Если окажетесь в ситуации, когда цикл while продолжит выполняться до бесконечности, то ваша программа застрянет (или зависнет ). Тогда нужно закрыть браузер, чтобы прервать выполнение кода JavaScript .

    Должен отметить, что неуправляемый в JavaScript while loop обычно не работает вечно. Потому что, как программисты мы всегда обязаны удостовериться, что в какой-то момент условие нашего цикла while станет false .

    Теперь относительно «плюсов » — они весьма очевидны. While будет непрерывно работать до тех пор, пока выполняется условие. В качестве примера использования цикла while можно привести запрос к пользователю ввести данные. Цикл будет предлагать ввести данные снова и снова, пока пользователь не введет корректные данные.

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

    Синтаксис циклов for и while очень похож.

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

    Вот, как должен выглядеть код:

    while () { // вставьте сюда код, который должен выполняться циклично }

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

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

    Пример цикла while

    Предположим, что мы хотим попросить пользователя ввести число от 1 до 10. Но что произойдет, если он введет неправильное число?

    В этом случае мы должны попросить его снова ввести значение, и проверить, соблюдено ли условие (введено ли число от 1 до 10 ).

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

    Вот как может выглядеть наш код:

    var theNumber = prompt("Пожалуйста, введите число от 1 до 10."); while (theNumber < 1 || theNumber > 10 || isNaN(theNumber)) { theNumber = prompt("Введено неправильное значение, пожалуйста, введите число от 1 до 10!"); } alert("Отлично! Вы ввели число: " + theNumber);

    Стоит отметить, что в приведенном выше примере у нас используется три отдельных условия в цикле while JavaScript .

    Вот эти три условия: theNumber 10 || isNaN(theNumber) . Они указывают следующее:

    • ЕСЛИ theNumber меньше 1, ИЛИ;
    • ЕСЛИ theNumber больше 10, ИЛИ;
    • ЕСЛИ theNumber — это НЕ число, то продолжить цикл.

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

    Только в том случае, если все три условия оцениваются как false , общее условие цикла while будет оценено, как false , и он будет остановлен.

    Заключение

    JavaScript while loop является единственным реальным циклом в языках программирования. for является просто частной разновидностью цикла while .

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

    var counter = 0; while (counter < 10) { counter = counter + 1; console.log("The counter is currently at: " + counter); }

    Код будет повторяться ровно 10 раз, не больше и не меньше. Это в точности так, работает цикл for .

    Не нужно бояться использовать JavaScript while . Так как без него множество приложений просто не работали бы должным образом!

    Я надеюсь, вам понравилась эта статья.

    Перевод статьи «While Loop in JavaScript » был подготовлен дружной командой проекта .

    Хорошо Плохо

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

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

    В JavaScript существуют следующие операторы цикла:

    1) for используется когда вы заранее знаете, сколько раз вам нужно что-то сделать;
    2) for...in используется для обхода свойств объектов;
    3) while используется когда вы не знаете, сколько раз нужно что-то сделать;
    4) do...while работает аналогично с оператором while . Отличается тем, что do...while всегда выполняет выражение в фигурных скобках, по крайней мере один раз, даже если проверка условия возвращает false .

    Типы циклов в JavaScript, управление циклом 1. Цикл for

    Цикл for используется для выполнения итераций по элементам массивов или объектов, напоминающих массивы, таких как arguments и HTMLCollection . Условие проверяется перед каждой итерацией цикла. В случае успешной проверки выполняется код внутри цикла, в противном случае код внутри цикла не выполняется и программа продолжает работу с первой строки, следующей непосредственно после цикла.

    Следующий цикл выведет на консоль строчку Hello, JavaScript! пять раз.

    For (var i = 0; i < 5; i++) { console.log(i + ": Hello, JavaScript!"); }
    Рис. 1. Результат выполнения цикла for на консоли

    1.1. Как работает цикл for

    Цикл for состоит из трёх разных операций:

    Шаг 1. инициализация var i = 0; — объявление переменной-счётчика, которая будет проверяться во время выполнения цикла. Эта переменная инициализируется со значением 0 . Чаще всего в качестве счётчиков цикла выступают переменные с именами i , j и k .

    Шаг 2. проверка условия i < 5; — условное выражение, если оно возвращает true , тело цикла (инструкция в фигурных скобках) будет выполнено. В данном примере проверка условия идёт до тех пор, пока значение счётчика меньше 5 .

    Шаг 3. завершающая операция i++ — операция приращения счётчика, увеличивает значение переменной var i на единицу. Вместо операции инкремента также может использоваться операция декремента.

    По завершении цикла в переменной var i сохраняется значение 1 . Следующий виток цикла выполняется для for (var i = 1; i < 5; i++) { } . Условное выражение вычисляется снова, чтобы проверить, является ли значение счётчика i всё ещё меньше 5 . Если это так, операторы в теле цикла выполняются ещё раз. Завершающая операция снова увеличивает значение переменной на единицу. Шаги 2 и 3 повторяются до тех пор, пока условие i < 5; возвращает true .

    1.2. Вывод значений массива

    Чтобы вывести значения массива с помощью цикла for , нужно задействовать свойство массива length . Это поможет определить количество элементов в массиве и выполнить цикл такое же количество раз.

    Приведённый ниже скрипт выведет на экран пять сообщений с названиями цветов:

    Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"]; for (var i = 0; i < flowers.length; i++){ alert(flowers[i] + " - это цветок."); }

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

    Var flowers = ["Rose", "Lily", "Tulip", "Jasmine", "Orchid"], len = flowers.length; for (var i = 0; i

    2. Цикл for...in

    Циклы for...in используются для обхода свойств объектов, не являющихся массивами. Такой обход также называется перечислением . При обходе рекомендуется использовать метод hasOwnProperty() , чтобы отфильтровать свойства, которые были унаследованы от прототипа.

    Для примера создадим объект с помощью литерала объекта.

    Var user = { name: "Alice", age: 25, country: "Russia" }; for (var prop in user) { console.log(prop + ": " + user); }
    Рис. 2. Результат выполнения цикла for...in на консоли

    Предположим, что в сценарии до или после создания объекта user прототип объекта Object был расширен дополнительным методом clone() .

    If (typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function () {}; }

    Так как цепочка наследования прототипа постоянно проверяется интерпретатором, то все объекты автоматически получают доступ к новому методу.

    Рис. 3. Результат повторного выполнения цикла for...in на консоли

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

    Var user = { name: "Alice", age: 25, country: "Russia" }; if (typeof Object.prototype.clone === "undefined") { Object.prototype.clone = function () {}; } for (var prop in user) { if (user.hasOwnProperty(prop)) { console.log(prop + ": " + user); } }
    Рис. 4. Результат перечисления свойств объекта с помощью метода hasOwnProperty()

    3. Цикл while

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

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

    Данный цикл выведет на экран таблицу умножения для числа 3:

    Var i = 1; var msg = ""; while (i < 10) { msg+= i + " x 3 = " + (i * 3) + "
    "; i++; } document.write(msg);
    Рис. 5. Результат выполнения цикла while

    4. Цикл do...while

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

    Var result = ""; var i = 0; do { i += 1; result += i + " "; } while (i < 5); document.write(result);
    Рис. 6. Результат выполнения цикла do...while

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

    Var i = 10; do { document.write(i + " "); i++; } while (i < 10);

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

    При создании любого цикла можно создать бесконечный цикл, который никогда не завершится. Такой цикл может потенциально продолжать работать до тех пор, пока работает компьютер пользователя. Большинство современных браузеров могут обнаружить это и предложат пользователю остановить выполнение скрипта. Чтобы избежать создания бесконечного цикла, вы должны быть уверены, что заданное условие в какой-то момент вернёт false . Например, следующий цикл задаёт условие, которое никогда не возвращает ложь, так как переменная i никогда не будет меньше 10:

    For (var i = 25; i > 10; i++) { document.write("Это предложение будет выводиться бесконечно...
    "); }

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

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

    For (var count = 1; count < 3; count++) { document.write(count + ". Строка цикла
    "); for (var nestcount = 1; nestcount< 3; nestcount++) { document.write("Строка вложенного цикла
    "); } }
    Рис. 7. Результат выполнения вложенного цикла for

    7. Управление циклом

    Циклом можно управлять с помощью операторов break; и continue; .

    7.1. Оператор break;

    Оператор break; завершает выполнение текущего цикла. Он используется в исключительных случаях, когда цикл не может выполняться по какой-то причине, например, если приложение обнаруживает ошибку. Чаще всего оператор break; является частью конструкции if .

    Когда оператор break; используется без метки, он позволяет выйти из цикла или из инструкции switch . В следующем примере создаётся счётчик, значения которого должны изменяться от 1 до 99 , однако оператор break прерывает цикл после 14 итераций.

    For (var i = 1; i < 100; i++) { if (i == 15) { break; } document.write(i); document.write("
    "); }
    Рис. 8. Результат работы оператора break в цикле for

    Для вложенных циклов оператор break; используется с меткой, с помощью которой завершается работа именованной инструкции. Метка позволяет выйти из любого блока кода. Именованной инструкцией может быть любая инструкция, внешняя по отношению к оператору break; . В качестве метки может быть имя инструкции if или имя блока инструкций, заключенных в фигурные скобки только для присвоения метки этому блоку. Между ключевым словом break; и именем метки не допускается перевод строки.

    Outerloop: for(var i = 0; i < 10; i++) { innerloop: for(var j = 0; j < 10; j++) { if (j > 3) break; // Выход из самого внутреннего цикла if (i == 2) break innerloop; // То же самое if (i == 4) break outerloop; // Выход из внешнего цикла document.write("i = " + i + " j = " + j + "
    "); } } document.write("FINAL i = " + i + " j = " + j + "
    ");

    7.2. Оператор continue;

    Оператор continue; останавливает текущую итерацию цикла и запускает новую итерацию. При этом, цикл while возвращается непосредственно к своему условию, а цикл for сначала вычисляет выражение инкремента, а затем возвращается к условию.

    В этом примере на экран будут выведены все чётные числа:

    Var i; for(i = 1; i