Как сделать обратный цикл for js

Обновлено: 02.07.2024

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

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

Часто операторы цикла используются при работе с массивами.

Так, вместо того чтобы писать:

Различные виды операторов цикла

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

for – в цикле выполняет блок кода заданное число раз
for/in – цикл по свойствам объекта
while – выполняет блок кода до тех пор, пока заданное условие не будет равно true
do/while – также выполняет блок кода до тех пор, пока заданное условие не будет равно true

Оператор цикла for

Оператор for это наиболее часто используемый инструмент для создания цикла.

Оператор цикла for имеет следующий синтаксис:

for (выражение 1; выражение 2; выражение 3) выполняемый блок кода
>

Выражение 1 выполняется до начала цикла (до начала выполнения блока кода).
Выражение 2 определяет условие продолжения цикла.
Выражение 3 выполняется после каждого прохода цикла.

Пример:

Код этого примера можно прочитать следующим образом:

выражение 1 до начала цикла инициализирует переменную-счетчик (var i = 0).
выражение 2 определяет условие продолжения цикла (i должно быть меньше 5).
выражение 3 после каждого прохода цикла увеличивает на 1 счетчик (i++).

Выражение 1
Обычно, выражение 1 используется для инициализации переменной, которая будет использоваться внутри цикла, как правило в качестве счетчика (i = 0).

При этом выражение 1 является необязательным.

Можно в выражении 1 инициализировать несколько переменных (разделяя их запятыми):

Можно пропустить выражение 1 (и определить все необходимые значения до самого цикла):

Выражение 2
Часто выражение 2 используется для вычисления состояния переменной-счетчика.

При этом выражение 2 также является необязательным.

Если выражение 2 возвращает true, то начнется новый цикл. Если оно вернет false, то цикл закончится.

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

Выражение 3
Обычно, в выражении 3 изменяется значение переменной-счетчика.

При этом выражение 3 также является необязательным.

Выражение 3 может выполнять любые действия, например, уменьшение (i--), увеличение (i = i + 15) и т.д.

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

Оператор цикла for/in

Оператор for/in используется для обхода в цикле свойств объекта:

Оператор цикла while

Оператор while в цикле выполняет блок кода до тех пор, пока заданное условие равно true.

while (условие) выполняемый блок кода
>

В следующем примере код цикла будет выполняться снова и снова, пока значение переменной (i) будет меньше 10:

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

Оператор цикла do/while

Цикл do/while является вариантом цикла while. Этот цикл один раз выполнит блок кода перед проверкой условия завершения и затем будет повторять цикл до тех пор, пока условие не будет равно true.

do выполняемый блок кода
>
while (условие);

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

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

For vs While

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

В следующем примере для вывода названий машин из массива cars используется оператор цикла for:

В следующем примере для вывода названий машин из массива cars используется оператор цикла while:

Операторы break и continue

Оператор break позволяет "выпрыгнуть" из цикла.

Оператор continue позволяет "перепрыгнуть" через один проход цикла.

Оператор break

В предыдущих главах этого учебника вы уже встречались с оператором break. Он использовался для "выпрыгивания" из оператора условия switch.

Также, оператор break может использоваться и для "выпрыгивания" из цикла.

Оператор break прерывает цикл и передает выполнение коду, следующему после оператора цикла (если есть):

Оператор continue

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

В следующем примере пропускается значение 3:

Метки

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

метка:
выражение

Операторы break и continue единственные операторы в JavaScript, которые могут "выпрыгивать" из блока кода.

Оператор continue (с ссылкой на метку или без) единственный способ пропустить один проход цикла.

Оператор break (без ссылки на метку) единственный способ выйти из цикла или условного оператора switch.

Оператор break с ссылкой на метку позволяет выйти из любого блока кода и перейти в конкретное место программы:

Стоит напомнить, что блок кода — это код, расположенный внутри фигурных скобок < и >.

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

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

В JavaScript, как и в большинстве других языков программирования, есть несколько видов циклов: цикл с предусловие ( while ), цикл с постусловием ( do-while ), цикл по параметру ( for ), цикл перебора свойств объекта ( for-in ). Далее все эти виды циклов рассмотрим более подробно.

Цикл while в JavaScript

Цикл этого вида является основным. Синтаксис:

while (Выражение) Инструкция

В этом цикле сначала вычисляется Выражение. Если выражение ИСТИННО, то выполняется Инструкция. Если выражение ЛОЖНО, то цикл НЕ выполняется (либо прерывается).

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

В теле цикла мы каждый раз увеличиваем значение переменной i на единицу. Но мы это делаем уже ПОСЛЕ того, как выводим значение на экран. Поэтому в данном примере мы выводим числа от 0 до 9.

Почему только до 9? Потому что в нашем случае выражение (i , когда переменная i равна 10 , уже будет ложным. И, поскольку это цикл с предусловием (то есть мы СНАЧАЛА проверяем выражение, а ПОТОМ, в зависимости от результата, выполняем или не выполняем цикл), то тело цикла уже НЕ будет выполнено, когда i равна 10 .

Цикл do-while в JavaScript

do Инструкция while (Выражение);

В этом цикле сначала выполняется Инструкция, затем вычисляется Выражение. Если выражение ИСТИННО, то цикл повторяется, если ложно, то прекращается. Поскольку выражение проверяется после выполнения тела цикла, такой цикл будет выполнен хотя бы один раз.

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

В этом примере, несмотря на то, что проверяемое выражение изначально ложно (100 , цикл всё-равно будет выполнен один раз и выведет на экран число 100.

Цикл for в JavaScript

Это, пожалуй, самый удобный и безопасный цикл. Безопасный, потому что сделать его бесконечным почти невозможно. И простой, потому что значение переменной-счётчика не надо увеличивать в теле цикла - оно увеличивается автоматически. Синтаксис:

Для понимания лучше сразу покажу пример:

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

Цикл for-in в JavaScript

Если вы пока не сталкивались с объектно-ориентированным программированием (ООП), то с таким видом цикла вы не встречались. Синтаксис:

for (Переменная in Объект) Инструкция;

Здесь Переменная должна быть либо именем переменной, либо инструкцией var, объявляющей переменную, либо элементом массива, либо свойством объекта (то есть должна быть чем-то таким, что может находиться левой части выражения присваивания). Параметр Объект – это имя объекта или выражение, результатом которого является объект.

Этот цикл предоставляет возможность перебора всех свойств Объекта. Тело такого цикла выполняется один раз для каждого свойства Объекта.

Здесь мы сначала создаём объект Coord, у которого есть свойства x, y, z. Затем в цикле перебираем эти свойства и выводим на экран их имена и значения. В итоге на экран будет выведено:

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

Бесконечный цикл в JavaScript

ВАЖНО! Не забывайте, что циклы могут быть бесконечными, что приведёт к зависанию вашего сценария. Чтобы этого избежать - в теле цикла не должно быть кода, который каким-то образом может привести к тому, что Выражение всегда будет истинным.

Примеры бесконечных циклов:

Наиболее часто новички совершают ошибку из первого примера, то есть просто забывают про счётчик. Обратите внимание на цикл for - его при желании тоже можно сделать бесконечным.

Прерывание и продолжение циклов в JavaScript

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

Скажу только, что для прерывания цикла используется инструкция break , а для продолжения - continue . Примеры:

Если в примерах что-то непонятно, то пояснения см. здесь.

Вложенный цикл в JavaScript

Циклы могут быть вложенными. Пример:

Здесь вложенный цикл выделен красным цветом. Этот пример выведет на экран таблицу из 4-х строк и 3-х столбцов:

ВНИМАНИЕ! Помните, что инструкция break выполняет выход только из самого внутреннего цикла. То есть если break используется во вложенном цикле, то этот цикл прервётся, но внешний цикл будет продолжать работу.

Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

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

Цикл for()

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

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

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

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

i crayon-o">+ i + ", sum crayon-o">+ sum + "

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

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

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

Показать информацию
Показать информацию
Показать информацию
Показать информацию
Показать информацию

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

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

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

Цикл while()

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

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

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

label for = "from" > От числа / label > input type = "number" min = "1" max = "50" value = "1" id = "from" >

label for = "to" > До числа / label > input type = "number" min = "1" max = "50" value = "5" id = "to" >

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

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

"Сегодня вас ждет сюрприз" , "Вы - любимчик удачи" , "Попробуйте еще раз" , "Азартные игры не для вас" ,

"Учите JavaScript - и вас ждет успех" , "Пора сделать зарядку" , "Перерыв на кофе-чай-печеньки сейчас будет кстати" ,

"Пора выбросить мусор из квартиры" , "У вас отличный вкус" , "Нечего заглядываться на чужих жен" , "Пора поработать" ] ;

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

Примечание: цикл while - это тот цикл, с помощью которого лучше всего обычно получается "подвесить" браузер. Т.е. вы можете таким образом сформулировать условие в нем, что оно всегда будет возвращать true , соответственно, цикл будет бесконечным и будет замедлять работу браузера.

Цикл 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 (англ. - ломать, нарушать, прерывать), который как раз и предназначен для прерывания цикла. Обычно это осуществляется при выполнении какого-либо условия внутри цикла.

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

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

Задание 1

Вывести на экран все целые числа от 1 до 100.

Как разумный человек, вы подозреваете, что задачка решается хитро, а не простым вбиванием циферок через клавиатуру. Здесь мы видим некую цикличность с заданным количеством повторов (вывести 100 раз) – есть начало и конец.

Пример решения

Создадим простую HTML-структуру, куда будет осуществляться вывод – простой параграф и идентификатором out_num.

JavaScript код

Объявим переменную out_num и присвоим ей значение – получение элемента (параграфа) с идентификатором out_num.

let out_num = document.getElementById('out_num');

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

Запускаем цикл for, в круглых скобках прописываем три условия, которые обеспечат точное решение задачи. Смотрим внимательно задание – где стартовое число должно быть 1. Задаем переменной счетчика цикла значение 1 (let i=1). Условие должно выполняться, пока переменная i меньше или равна 100 (i for (let i=1; i

Дальше полученный результат записываем в переменную p. К тому, что там было (к пустой строке) добавим цифру i и пробел для разделения чисел. Эта формула в фигурных скобочках будет повторяться столько раз, пока не выполнится условие до конца.

Теперь выведем на экран содержимое переменной p.

Все отлично сработало.

Задание 2

Вывести на экран в столбик числа от 50 40 30 20 10 0 в цикле.

Пример решения

Здесь надо для цикла for изменить условия и формулу записи в переменную. Меняем только эту часть кода. Начальное условие – начинать выводить с 50, цикл остановится когда i достигнет нуля, каждый раз i будет уменьшаться на 10. Вместо пробела вставим тег br, тогда номера будут идти в столбик.

Цикл может работать, как в сторону увеличения, так и в сторону убывания, все зависит от условий.

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

Цикл for применяется тогда, когда заведомо известно количество повторений, в отличии от цикла while. Сначала для цикла for создают условия: назначаем точку отсчета, работаем пока условие верно и с каким шагом будет что-то меняться.

for (старт; если верно; шаг)

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

Затем в фигурных скобках пишем формулу, которая будeт повторяться, пока условие верно. Дальше мы задаем условие и пока условие верно, цикл работает. До тех пор, пока i меньше 30, цикл будет работать, то есть выведутся числа от 10 до 30 с шагом 5 (10, 15, 20, 25).

Сделаем проверку самым простым способом – выведем результат в консоль.

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

Пример

Цикл for можно прекратить, когда i дойдет до 15, числа совсем перестанут выводиться.

Пример

Команда continue прерывает текущий круг цикла, а команда break полностью останавливает цикл.

Заключение

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

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

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

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