Циклы в JavaScript

Цикл - это простой способ перебрать ряд элементов, которые содержатся в массиве или коллекции html-элементов для того, чтобы выполнить с ними ряд действий. Также циклы используются для выполнения однотипных действий типа  подсчета суммы диапазона чисел или перемещения группы объектов на какое-то количество пикселей, например, при создании снега или дождя в canvas. В JavaScript существует несколько видов циклов:

1. for()
2. while()
3. do ... while()
4. for...in()
5. for...of()

Цикл for()

Цикл for() называется еще циклом со счетчиком и имеет следующий синтаксис:

Этот цикл выполняется до тех пор, пока условие возвращает true. Как только условие вернуло false, выполнение цикла прекращается и выполняется тот код, который идет за ним, например, вывод результата работы цикла. Если вы запишите условие таким образом, что оно сразу вернет false, то цикл не выполнится ни разу.

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

Например, нам необходимо подсчитать сумму чисел от 1 до 10. Цикл будет выглядеть так:

Если вам недостаточно одного счетчика, вы можете использовать 2, тогда они инициализируются через запятую. Условий также может быть 2 или можно оставить одно. Это зависит от поставленной задачи. Код, представленный ниже, например, 50 раз выведет в консоль число 101:

Цикл for() также позволяет перебрать элементы массива или html-коллекции, хотя с этим также отлично справляется метод массивов forEach(). В примере ниже по клику мы будем показывать информацию о неких выдуманных людях, которая спрятана  в data-атрибутах элементов списка. Разметка и css-стили:

JavaScript-код:

В этом коде мы сначала назначаем каждому элементу <li> обработчик события click,  а затем, после того, как пользователь кликнул по элементу списка, удаляем этот обработчик события. После того, как показана информация о всех людях в этом списке, мы меняем его внешний вид за счет добавления класса "complete" к элементу <ul>.

Попробуйте самостоятельно, как работает код.

Как назначать обработчики событий можно прочитать в статье "Обработка событий в JavaScript", про варианты отображения курсоров - в статье "Виды курсоров в CSS".

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

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

В качестве примера давайте выведем методом document.write() таблицу из 4-х строк и 6 ячеек в каждой строке. Операции по выводу строк и ячеек как раз являются примером повторяющихся действий, т.к. в каждой <tr> должно быть одинаковое количество <td> (более сложные таблицы с объединением ячеек рассматривать не будем).

Цикл while()

Цикл while() называют еще циклом с предусловием. Это значит, что вы записываете в скобках после ключевого слова while некое условие, которое возвращает либо true, либо false. Если возвращается true, цикл выполняется, если же false, то нет. Синтаксис этого цикла таков:

Если переводить JavaScript-код на русский язык, то смысл цикла while можно выразить такой фразой: пока (while) выполняется условие, мы будем делать некоторые операции.

Вполне возможна ситуация, когда ваш код не выполнится ни разу. Например, вам нужно подсчитать сумму чисел в заданном пользователем диапазоне. Рассмотрим вариант кода для этого с использованием полей формы типа number:

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

Попробуйте сами:

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

Давайте немножко погадаем:

Цикл do ... while()

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

Цикл do ... while() также может стать бесконечным, если вы сформировали условие таким образом, что оно все время возвращает true. Так, как на картинке выше :).

Синтаксис цикла do ... while()

Т.е. в отличие от цикла while() цикл do ... while() выполнится хотя бы раз даже, если условие вернет false.

В примере ниже мы используем цикл do ... while() для того, чтобы показать построчно строчки стихотворения.  Здесь мы сочетаем возможности JavaScript с возможностями анимации CSS3, а именно свойств animation и animation-delay, а также директивы @keyframes. С помощью css-свойств мы можем создать анимацию, не задействуя такие методы JavaScript, как setTimeout() или setInterval(), а с помощью цикла - задать задержку animation-delay, которую мы увеличиваем для каждой следующей строки.

Давайте посмотрим пример в действии:

Кстати, при формировании css-стилей для примера, был использован подход с созданием перекрывающего черного полупрозрачного слоя overlay из этой статьи.

Оператор break

Давайте рассмотрим еще один пример do ... while(), в котором в условии у нас указано true, т.е. мы все-таки сделаем бесконечный цикл. Необходимо как-то из него найти выход. Для этого в JavaScript существует оператор break (англ. - ломать, нарушать, прерывать), который как раз и предназначен для прерывания цикла. Обычно это осуществляется при выполнении какого-либо условия внутри цикла.

В примере нам необходимо вывести методом document.write() несколько div-ов с классом yellow-bg и разной шириной - от 200 до 700px. Для этого мы объявим и будем использовать в цикле переменную w. Сначала она будет равна 200, но с каждой итерацией цикла мы будем увеличивать ее на 100 и использовать в атрибуте style для вывода div-а. Как только эта переменная станет больше 700, мы прервем выполнение цикла оператором break.

Вот, что получилось в итоге:

Как видно из примера, после вывода div-а с шириной в 700px цикл действительно прервался.

Оператор continue

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

Для примера ниже, в котором мы подсчитываем сумму введенных пользователем положительных чисел, оператор  continue используется дважды: когда пользователь вводит ноль (любое число с прибавленным 0 - то же самое число, так зачем это делать?) и когда пользователь вводит строку, которая не может быть прибавлена к числам.

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

Попробуйте сами, нажав на кнопку:

Цикл for...in()

Цикл for...in() предназначен для перебора ключей массива или объекта. Он имеет следующий синтаксис:

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

Результат: мы видим только цифры, которые являются индексами массива (console.log() заменили на  document.write()):

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

Результат:

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

Посмотрим, что получилось (в примере была замена console.log() на document.write()):

Еще одна область применения цикла for ... in - это вывод значений свойств объекта, например, таким образом:

В консоли получим такой результат:

Цикл for...in для перебора html-элементов

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

Ошибка при добавлении класса к элементам в цикле for ... in

Эта ошибка произошла при переборе в цикле for...in элементов с классом "test-block", когда к каждому из них при нажатии на кнопку нужно добавить класс "test-blue". Код срабатывает для 4-х html-элементов, которые перебраны в цикле, но не может добавить класс для свойства length, которое возвращает не html-элемент, а число.

Код примера:

Сам пример вполне рабочий, но в консоли вы увидите ошибку.

Происходит это из-за разницы в обращении ко всем свойствам псевдомассива html-элементов, перебираемым в цикле for ... in. На скриншоте вы видите сравнение в выводе в консоль данных из обычного массива, который мы разбирали ранее, и псевдомассива из html-элементов:

Все свойства обычного массива и псевдомассива html-элементов

Временами это может привести к неработоспособности всего кода, который вы будете писать после цикла for...in.

Цикл for...of()

В отличие от for...in() цикл for...of() предназначен для вывода значений элементов массива. Синтаксис for...of() таков:

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

В этом примере мы сразу выводим значения элементов массива, не затрагивая его индексы.

Стоит отметить, что цикл for...of() появился в стандарте ES6 (EcmaScript2015) и может не работать в Internet Explorer и некоторых устаревших версиях браузеров. Смотрите поддержку этого цикла на caniuse.com.

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

Поскольку символы в строках являются также итерируемыми, т.е. к любому символу строки, объявленной в виде переменной let str="Hello world" можно обратиться таким образом: str[0], str[1], ...,  str[str.length-1]. Поэтому мы можем перебрать содержимое какого-либо элемента и вывести его в виде разноцветных букв.

Давайте посмотрим, как сработает for...of для строки на реальном примере: