Можно ли цикл for вложить в цикл while

Обновлено: 18.04.2024

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

  • Урок №
    Учебник
    по регулярным выражениям
  • Урок №
    Работа с регулярными
    выражениями. Глава 1.
  • Урок №
    Работа с регулярными
    выражениями. Глава 2.
  • Урок №
    Работа с регулярными
    выражениями. Глава 3.
  • Урок №
    Работа с регулярными
    выражениям. Глава 4.
  • Урок №
    Отличия
    от PHP версии

Разное

Работа с канвасом

Практика

Контекст

Drag-and-Drop

  • Урок №
    новая вкладка с new.code.mu
    Доступные события
  • Урок №
    новая вкладка с new.code.mu
    Перемещение элемента по окну
  • Урок №
    новая вкладка с new.code.mu
    Перемещение на другой элемент
  • Урок №
    новая вкладка с new.code.mu
    Объект event.dataTransfer
  • Урок №
    новая вкладка с new.code.mu
    Картинка при перетягивании
  • Урок №
    новая вкладка с new.code.mu
    Вид курсора
  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript -->
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

  • Урок №
    новая вкладка с new.code.mu
    Функции resolve reject
  • Урок №
    новая вкладка с new.code.mu
    Метод catch
  • Урок №
    новая вкладка с new.code.mu
    Цепочки промисов
  • Урок №
    новая вкладка с new.code.mu
    Перехват ошибок
  • Урок №
    новая вкладка с new.code.mu
    Promise.all
  • Урок №
    новая вкладка с new.code.mu
    Promise.race
  • Урок №
    новая вкладка с new.code.mu
    async await
  • Урок №
    новая вкладка с new.code.mu
    Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

  • Урок №
    Учебник
    jQuery для новичков
  • Урок №
    Основы
    работы с jQuery
  • Урок №
    Манипулирование
    элементами страницы
  • Урок №
    Работа
    с набором элементов
  • Урок №
    Работа
    с событиями jQuery
  • Урок №
    Эффекты и анимация
    библиотеки jQuery
  • Урок №
    Практика на отработку
    библиотеки jQuery
  • Урок №
    Работа с
    библиотекой jQueryUI
  • Урок №
    Популярные плагины
    библиотеки jQuery

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

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

Но это не нужно - у нас есть возможность сделать так, чтобы JavaScript за нас выполнил некоторую операцию нужное количество раз. Например, возвел все элементы массива в квадрат.

Делается это с помощью циклов.

Цикл while

Цикл while будет выполняться до тех пор, пока верно (истинно) выражение, переданное ему параметром. Смотрите синтаксис:

В принципе, цикл while может выполняться бесконечно (но это приведет к зависанию скрипта!), достаточно передать ему выражение, которое никогда не станет ложным. Например, так:

Давайте последовательно выведем с помощью цикла while числа от одного до пяти:

Обратите внимание на переменную i – она является так называемым счетчиком цикла. Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Кроме того, они выполняют вспомогательную роль - в нашей задаче мы использовали счетчик, чтобы вывести цифры от 1 до 5.

Для счетчиков принято использовать буквы i, j и k.

Цикл for

Цикл for является альтернативой while. Он более сложен для понимания, но чаще всего его любят больше, чем while за то, что он занимает меньше строчек.

Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, пример: i = 0.

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

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

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

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

Цикл for

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

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

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

Пример

Цикл do. while

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

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

Пример

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

Цикл while

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

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

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

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

Пример 1

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

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

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

Пример 2

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

Метка (label)

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

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

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

Пример

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

break

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

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

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

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

Пример 1

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

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

continue

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

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

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

Пример 1

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

Пример 2

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

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

for. in

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

Пример

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

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

Пример №2

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

Массивы

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

Пример

for. of

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

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

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

Требования: Базовые значения компьютерной системы и базовое понимание HTML и CSS, JavaScript первые шаги.
Цель: Понять как работают циклы в JavaScript.

Циклы в коде

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

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



Цикл обычно составляет одну или несколько из следующих функций:

  • Счётчик, который инициализируется с определённого значения — начальной точки цикла (На рисунке выше первый этап: "у меня нет еды (i have no food)")
  • Условие выхода — критерий, при котором цикл останавливается, — обычно наступает, когда цикл достигает определённого значения. Это иллюстрируется выше словами "Достаточно ли у меня еды? (Do I have enough food?)". Предположим, фермеру нужно 10 порций еды, чтобы прокормить семью.
  • Итератор постепенно увеличивает счётчик на некоторое значение на каждом шаге цикла, пока не достигнуто условия выхода. Мы явно не показали это в изображении, но если предположить что фермер собирает две порции еды в час, то после каждого часа, количество еды, которое у него имеется, увеличивается на две порции, и он проверяет достаточно ли у него еды сейчас. Если у него собралось 10 порций (условие выхода), он может остановить сбор и вернуться домой.

В псевдокоде это будет выглядеть следующим образом:

Таким образом, необходимое количество еды устанавливается равным 10, а изначально фермер не имеет ни одной порции, т.е. начало равно 0. На каждой итерации цикла проверяем, соответствует ли собранное количество еды, с тем количеством, которое ему необходимо. Если это так, можно выйти из цикла, если нет, фермер собирает ещё 2 порции и снова переходит к проверке.

Зачем это нужно?

Итак вы разобрались, как работают циклы. Но, вероятно, думаете: "Хорошо, но как это мне поможет писать код на JavaScript". Как мы писали ранее, циклы постоянно повторяют одно и тоже действие, что отлично подходит для быстрого выполнения повторяющихся задач.

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

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

  • random() , описанная в коде, возвращает случайное число между 0 и x-1 .
  • WIDTH и HEIGHT — это высота и ширина окна браузера.

Вы должны понять основную идею: мы используем цикл для запуска 100 итераций этого кода, каждая из которых рисует круг в случайном месте в окне. Количество кода было бы одинаковым, если бы нам нужно было нарисовать 10, 100 или 1000 кругов, поменяется лишь одно число.

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

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

Правила записи цикла

Рассмотрим некоторые конкретные конструкции циклов. Первый вариант, который вы будете использовать чаще всего, это цикл for. Он имеет следующий синтаксис:

  1. Ключевое слово for, за которым следуют круглые скобки.
  2. В круглых скобках у нас есть три части, разделённые точкой с запятой:
    1. Инициализатор — обычно это переменная численного типа, которая увеличивается каждую итерацию, чтобы посчитать количество шагов цикла. Её также называет счётчиком.
    2. Условие выхода — как упоминалось ранее, определяет, когда цикл должен остановиться. Обычно это выражение с оператором сравнения проверяющим, выполнено ли условие выхода.
    3. Окончательное выражение — вычисляется (или выполняется) каждый раз, когда цикл проходит полную итерацию. Обычно оно служит для увеличения (или уменьшения) переменной счётчика, чтобы приблизить её значение к условию выхода.

    Посмотрим на пример, чтобы разобраться в этом более детально.

    Этот блок кода будет иметь следующий результат:

    Примечание: вы можете найти этот пример на GitHub или посмотреть онлайн.

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

    1. Итератор, i , начинается с 0 ( var i = 0 ).
    2. Цикл запускается, пока значение итератора не будет больше длины массива кошек. Это важно - условие выхода показывает когда именно цикл должен работать, а когда нужно выйти из цикла. Поэтому в случае, пока i < cats.lenght по-прежнему возвращает true , цикл будет работать.
    3. Внутри тела цикла мы соединяем текущий элемент цикла ( cats[i] это cats [независимо от того, чем i является в данный момент]) с запятой и пробелом. Итак:
      1. В начале, i = 0 , поэтому cats[0] + ', ' соединятся в ("Билл, ").
      2. На втором шаге, i = 1 , поэтому cats[1] + ', ' соединятся в ("Макс, ")
      3. И так далее. В конце каждого цикла i увеличится на 1 ( i++ ) , и процесс будет начинаться заново.

      Остаётся одна небольшая проблема: выходная строка сформирована не совсем корректно:

      Моих кошек зовут Билл, Макс, Пикси, Алиса, Жасмин,

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

      Примечание: вы можете найти этот пример на GitHub или посмотреть онлайн.

      Важно: С циклом for, также как и с другими циклами, вы должны убедиться что инициализатор (счётчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдёт, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется бесконечным циклом.

      Выход из цикла с помощью break

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

      Тоже самое и с циклами — условие break моментально закончит цикл и заставит браузер запустить следующий после цикла код.

      Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.
      Начнём с разметки HTML: поле позволяет нам ввести имя для поиска, элемент (кнопка) для подтверждения поиска, и элемент для отображения результата:

      Теперь в JavaScript:

      1. Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.
      2. Далее мы применяем обработчик события кнопки ( btn ), чтобы при её нажатии запускался код для поиска и отображения результатов.
      3. Мы сохраняем значение, введённое в текстовое поле, в переменную searchName , затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.
      4. Теперь перейдём к интересующей нас части — к циклу for :
        1. Мы начали счётчик с 0 , запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент i увеличиваем на 1 после каждой итерации цикла.
        2. Внутри цикла мы сначала разделяем текущий контакт ( contacts[i] ) на символе двоеточия, и сохраняем полученные два значения в массиве с названием splitContact .
        3. Затем мы используем условный оператор, чтобы проверить, равно ли splitContact[0] (имя контакта) введённому searchName . Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем break для завершения цикла.

        После итерации (contacts.length-1) , если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.

        Примечание: вы можете посмотреть исходный код на GitHub или запустить его (also see it running live).

        Пропуск итераций с продолжением

        Оператор continue работает аналогичным образом, как и break , но вместо полного выхода из цикла он переходит к следующей итерации цикла.

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

        Код HTML в основном такой же, как и в предыдущем примере — простой ввод текста и абзац для вывода. JavaScript в основном такой же, хотя сам цикл немного другой:

        1. В этом случае на входе должно быть число ( num ). Циклу for присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного num , а итератор добавляет 1 к счётчику каждый раз.
        2. Внутри цикла мы находим квадратный корень каждого числа с помощью Math.sqrt(i), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что Math.floor () делает с числом, которое передаёт).
        3. Если квадратный корень и округлённый вниз квадратный корень не равны друг другу (! ==) , значит квадратный корень не является целым числом, поэтому нас он не интересует. В таком случае мы используем оператор continue , чтобы перейти к следующей итерации цикла без записи этого числа.
        4. Если квадратный корень является целым числом, мы пропускаем блок if полностью, поэтому оператор continue не выполняется; вместо этого объединяется текущее значение i с пробелом в конце содержимого абзаца.

        Примечание. Вы также можете просмотреть полный исходный код на GitHub (так же смотри этот код вживую).

        Циклы while и do. while

        for — не единственный тип цикла, доступный в JavaScript. На самом деле существует множество других типов циклов. И хотя сейчас не обязательно знать их все, стоит взглянуть на структуру нескольких других, чтобы вы могли распознать те же функции, но в работе немного по-другому.

        Рассмотрим цикл while. Синтаксис этого цикла выглядит так:

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

        Здесь присутствуют те же три элемента и в том же порядке, что и в цикле for . Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.

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

        Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла while:

        Примечание: цикл все ещё работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).

        Цикл do. while представляет собой вариацию структуры цикла while :

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

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

        Перепишем наш пример с кошками, чтобы использовать цикл do. while :

        Примечание: И снова это работает так же, как и ожидалось - посмотрите, как он работает на GitHub (также посмотрите полный исходный код).

        Замечание: Применяя циклы while and do. while , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется доктор Стрэндж и Дормамму бесконечным циклом.

        Практическое упражнение: запускаем обратный отсчёт!

        В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!" В частности, мы хотим, чтобы вы:

        • Цикл от 10 до 0. Мы предоставляем вам инициализатор: var i = 10; .
        • Для каждой итерации создайте новый абзац и добавьте его к выходному элементу , который мы выбрали, используя var output = document.querySelector ('.output'); . В комментариях мы предоставили вам три строки кода, которые необходимо использовать где-то внутри цикла:
          • var para = document.createElement('p'); — создать новый абзац.
          • output.appendChild(para); — добавляет абзац к выводу .
          • para.textContent = — делает текст внутри абзаца равным значению, которое вы расположили справа, после знака равенства.
          • Если число равно 10, выведите в абзаце «Обратный отсчёт 10».
          • Если число равно 0, выведите в абзаце «Пуск!»
          • Для любого другого числа выведите в абзаце только число.

          Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.

          Практическое упражнение: Заполнение списка гостей

          Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.

          Для этого нужно сделать следующее:

          • Напишите цикл, который будет повторяться от 0 до длины массива people .
            Вам нужно начать с инициализатора var i = 0; , но какое нужно использовать условие выхода?
          • Во время каждой итерации цикла нужно проверять, соответствует ли текущий элемент массива именам "Фил" или "Лола", используя условный оператор:
            • Если это так, привяжите этот элемент массива в конец textContent абзаца refused , за которым следуют запятая и пробел.
            • Если это не так, привяжите этот элемент массива в конец textContent абзаца admitted , за которым следуют запятая и пробел.

            Мы уже предоставили вам:

            • var i = 0; — ваш инициализатор.
            • refused.textContent += — начало строки, которая объединит что-то до конца refused.textContent .
            • admitted.textContent += — начало строки, которая объединит что-то до конца admitted.textContent .

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

            Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.

            Так какой тип цикла использовать?

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

            For :

            while :

            do. while :

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

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

            Заключение

            Эта статья раскрывает основные концепции и различные опции, доступные при циклическом кодировании в 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! пять раз.


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

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

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

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

            Шаг 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 . Это поможет определить количество элементов в массиве и выполнить цикл такое же количество раз.

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

            2. Цикл for. in

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

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


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

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

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


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

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


            Рис. 4. Результат перечисления свойств объекта с помощью метода hasOwnProperty()

            3. Цикл while

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

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

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


            Рис. 5. Результат выполнения цикла while

            4. Цикл do. while

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


            Рис. 6. Результат выполнения цикла do. while

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

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

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

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

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

            nested-loop

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

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

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

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

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

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


            Рис. 8. Результат работы оператора break в цикле for

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

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

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

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


            Рис. 10. Результат работы оператора continue с меткой

            Циклы в JavaScript

            Циклы – это простой способ для многократного выполнения одних и тех же действий (кода).

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

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

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

            Цикл for

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

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

            Алгоритм работы цикла for в JavaScript

            Основные части конструкции цикла «for»:

            • инициализация - это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
            • условие - это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина , то выполняется итерация; в противном случае цикл «for» завершает работу;
            • финальное выражение - это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
            • тело цикла - инструкции, выполнение которых нужно повторять.

            Рассмотрим пример цикла, который выведет в консоль числа от 1 до 8:

            • инициализация: var i = 1 (объявление переменной i и присвоение ей значения 1);
            • условие выполнения цикла: i
            • финальное выражение, которое нужно выполнять в конце каждой итерации: i++ (увеличение значение переменной i на 1);
            • инструкция, которую нужно выполнять: console.log(i) (выведение значения счётчика в консоль).

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

            Таким образом, пример, приведённый выше, можно записать ещё так:

            Необязательные части цикла цикла «for».

            В «for» все части цикла являются не обязательными.

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

            В этом случае инициализацию переменной можно вынести за пределы цикла.

            Условие в «for» тоже является не обязательным. Без условия цикл будет выполняться бесконечное количество раз. В этом случае чтобы его прервать (выйти из цикла) необходимо использовать инструкцию break .

            Финальное выражение в «for» также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.

            В «for» можно вообще опустить 3 выражения (бесконечный цикл):

            Кроме этого, в качестве тела цикла «for» можно использовать пустое выражение ( ; ). Это используется, когда вам не нужно выполнять ни одной инструкции.

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

            Пример использования цикла «for» для перебора элементов массива:

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

            Пример на JavaScript - Вывод таблицы умножения в консоль с использованием вложенных циклов

            Цикл называется вложенным, если он находится в теле другого цикла.

            Цикл while

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

            Алгоритм работы цикла while в JavaScript

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

            Пример, в котором выведем в консоль чётные числа в диапазоне от 1 до 8:

            Цикл do. while

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

            Алгоритм работы цикла do. while в JavaScript

            Пример, в котором выведем в консоль сумму чисел, которые будем запрашивать у пользователя с помощью функции prompt :

            Цикл for. in

            Цикл «for. in» предназначен для перебора перечисляемых имён свойств объекта. В JavaScript свойство является перечисляемым, если его внутренний флаг [[Enumerable]] равен true .

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

            Например, объект (массив) созданный с использованием функции-конструктора Array или его литеральной записи имеет не перечисляемые свойства от Array.prototype и Object.prototype , такие как indexOf() , some() , toString() и др. Они не будут участвовать в цикле.

            Переберём свойства объекта, созданного с помощью литеральной записи:

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

            Если вам наследуемые свойства не нужно учитывать, то их можно пропустить:

            Использование цикла for. in для перебора массива. В массиве свойствами являются числовые индексы.

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

            При использовании цикла for…in стоит обратить внимание на то, что если вы к массиву добавили свои пользовательские свойства, то он по ним тоже пройдётся:

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

            Использование цикла for…in для перебора символов в строке:

            Инструкции break и continue

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

            Инструкция «break» предназначена для прекращения выполнения текущего цикла . Другими словами, она осуществляет выход и передачу управления инструкции, идущей после этого цикла.

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

            Инструкция «continue» предназначена для прекращения дальнейшего выполнения кода и перехода к следующей итерации цикла .

            Пример, в котором найдём в слове «программирование» символы «а» и «о», и выведем их позиции в консоль:

            Метки для break и continue

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

            Далее после оператора break или continue необходимо указать эту метку:

            Вызов break someLabel приведёт к переходу в конец цикла, перед которым данная метка указана .

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

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

            Пример, в котором выйдем сразу из 2 циклов, когда произведение значений переменных-счётчиков даст число большее 10.

            Кроме этого, операторы break и continue нельзя использовать в выражениях тернарных операторов.

            Цикл for. of (новинка в ES6)

            Цикл for. of появился в стандарте ES6. Предназначен он для перебора итерируемых объектов , т.е. объектов, в которых реализован метод Symbol.iterator . Этот метод ещё называют итератором . Именно его и использует цикл for. of для перебора объектов.

            Метод Symbol.iterator имеется у String , Array , Map , Set , arguments , NodeList и других объектов.

            Пример использование цикла for. of для посимвольного перебора строки:

            Пример использование цикла for. of для перебора коллекции DOM-элементов:

            Пример использование цикла for. of для перебора массива:

            Чем цикл for. of отличается от for. in

            Первое отличие цикла for. of от for. in заключается в том, что он может применяться только для итерируемым объектов, т.е. объектов, в которых реализован итератор ( Symbol.iterator ). Цикл for. in итератор не использует. Он предназначен для перебора любых объектов.

            Второе отличие заключается в том, что цикл for. of перебирает объект так, как это определено в итераторе. Например, в Array итератор реализован так, что цикл for. of пройдёт только по значениям в массиве и не будет включать в перебор другие (не индексные) свойства. Цикл for. in организован по-другому, он перебирает все перечисляемые свойства (имена ключей) объекта, в том числе и наследуемые.

            Рассмотрим эти отличия. Для этого возьмём предыдущий пример и добавим к нему пользовательское свойство, например, hero и установим ему значение 'Wasp' .

            При использовании for. of он переберёт все значения этого массива:

            При использовании for. in он переберёт все перечисляемые имена ключей этого объекта:

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

            Самостоятельное создание итератора для объекта

            Рассмотрим ещё один пример. В этом примере мы самостоятельно определим как должен итерироваться объект. Для этого создадим объект и определим ему итератор.

            Создание итератора начинается с добавления к объекту специального метода. Этот метод необходимо спроектировать так, чтобы он возвращал значения последовательно (одно за другим). Название методу согласно стандарту необходимо определить с помощью символа Symbol.iterator . Итератор должен возвращать всего один метод next() . Этот метод в свою очередь тоже должен возвращать объект, состоящий из 2 свойств: value и done . Ключ done - булевый. Он определяет есть ли ещё значения в последовательности ( false - да, true - нет). Ключ value должен содержать следующее значение последовательности.

            Задачи по циклам

            1. Написать с помощью цикла while «переворот» числа. Другими словами, нужно создать новое число, у которого цифры шли бы в обратном порядке (например: 472 -> 274).

            Автор статьи

            Куприянов Денис Юрьевич

            Куприянов Денис Юрьевич

            Юрист частного права

            Страница автора

            Читайте также: