Циклы в JavaScript
Думаю, каждый программист знает, что такое цикл. Но для начинающих кратко поясню: цикл — это последовательность одинаковых действий. То есть участок кода, который необходимо выполнить несколько раз. Подробнее о циклах вообще см. здесь.
Как всегда напоминаю, что полный обучающий курс по 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 можно здесь:
Java Script: все, что нужно знать о циклах
Программирование – перспективная сфера деятельности в современном мире. Хорошие программисты должны уметь работать с несколькими языками. В основном популярностью пользуется Си-семейство. Но для некоторых утилит весьма активно применяется так называемый JavaScript.
Новичку освоить его «с нуля» намного проще, чем Си-семейство. У данной языковой кодификации имеются разнообразные циклы, а также файлы и функции. О них должен знать каждый разработчик. Отдельное внимание рекомендуется уделить именно циклам. Они помогают значительно уменьшить размер исходного кода.
JavaScript – зачем используется
JS – это не просто язык программирования. Это – способ создания кодификаций высокого уровня, предусматривающий встраивание в другие утилиты. JavaScript в основном используется for веб-программирования.
К его ключевым особенностям относят следующие моменты:
- относительно небольшие программные коды (даже без задействования циклов);
- поддержку функциональных, императивных и событийно-ориентированных стилей;
- свободное распространение платформы.
Сделать на JS можно далеко не любой контент. Из-за этого возникли искусственные языки (CoffeeScript, Dart, Flow), которые не имеют ничего общего с Java. Они после запуска конвертируются и транслируются в браузерах.
Цикл – понятие и определение
Обычно разработчики стараются с помощью встроенных функций и особенностей того или иного языка облегчить себе работу. Для реализации поставленной задачи в JS нередко используются разнообразные циклы. Изучить их необходимо, если мы хотим писать в разы меньше, а выполнять значительно больше операций в утилите. Главное знать, как задействовать соответствующие «элементы».
Цикл – это элементарный метод многократного выполнения одних и тех же манипуляций в процессе работы утилиты. Происходит повторение участка кода. Если цикл применяется всего один раз, такой процесс носит называние итерации.
JavaScript предусматривает for working несколько видов циклов. Каждый имеет собственные ключевые особенности, но отвечает за выполнение одних и тех де манипуляций. Наиболее распространенные варианты циклов:
- for;
- do…while;
- while;
- for…in;
- for…of (начиная с версии ES6).
Все эти функции являются активно используемыми в программировании. Выполнить их при запуске той или иной программы не составляет никакого труда. Но сначала необходимо разобраться, какой вариант и за что конкретно отвечает.
Цикл первый – for
Этот вариант используется тогда, когда точно известно количество повторений в кодификации. Является одним из основных. Носит своеобразное название – счетчик.
Имеет следующий синтаксис:
For (инициализация, условие, итоговое выражение) <
У основной части конструкции for имеются следующие элементы:
- инициализация – выражение, которое выполняется непосредственно один раз и перед обработкой цикла, применяется при «установке» счетчика;
- условие – выражение, которое проверяется на истинность перед тем, как произойдут итерации цикла (при значении «ложь» for прекращает функционирование);
- финальное выражение – выражение, обрабатываемое в конце имеющихся итераций (задействуются преимущественно при корректировке счетчиков);
- тело – заданные для выполнения в циклической форме инструкции.
Важно обратить внимание на то, что, если тело цикла for имеет всего одну инструкцию, ее не требуется заключать в фигурные скобки.
Необязательные части
Может случиться так, что те или иные части рассмотренной конструкции требуется убрать. В JS справиться с поставленной задачей можно без проблем. Связано это с тем, что все части for являются необязательными.
Так, из них можно «выкинуть» инициализацию или какое-нибудь условие. Если воспользоваться последним приемом, for будет выполняется бесконечное количество раз. Для того, чтобы прекратить работу потребуется воспользоваться инструкцией break.
В виде тела допускается использование пустого выражения (;). Данный прием применяется, когда нет необходимости в выполнении каких-либо инструкций.
While
Цикл While потребуется тогда, когда речь идет о многократном исполнении тех или иных команд, но лишь пока истинно заданное условие. На практике встречается тогда, когда количество повторений заранее узнать не удается.
Имеет запись формата:
While (заданное условие) <
Истинность будет проверяться перед каждым выполнением. Бывает, что перед первой итерацией условие уже выступает в качестве ложного. Тогда цикл выполнится не сразу.
Do…while
Вызов оператора do…while предусматривает:
- выполнение инструкций до тех пор, пока условие истинно;
- проверка здесь проводится после обработки той или иной манипуляции;
- выполнится не меньше одного раза, даже если выражение имеет значение «ложь».
Строка записи соответствующего цикла выглядит следующим образом:
For…in
А вот еще один вариант. В ходе выполнения цикла for…in имеют место следующие особенности и нюансы:
- предназначение – для имен свойств объекта;
- свойство в JS перечисляемое, если его внутренний флаг [[Enumrable]] имеет значение «истина»;
- свойства выбранного элемента, которые нельзя отнести к перечисляемому типу, не задействуются внутри цикла.
Вид записи будет следующим:
For…in подходит использует не только элементы массива по перечисляемым свойствам. Подходит он также по наследуемым «параметрам». Если требуется не учитывать последние, их допускается пропустить.
For…in применяется весьма активно и для перебора конкретного массива. Свойствами там выступают так называемые индексы.
Также данный цикл подойдет и для свойств в произвольном порядке. Нова результат может отображаться с ошибками, так как при переборе массива иногда играет роль порядок символов. При подобных обстоятельствах соответствующий оператор лучше не применять в кодификации утилиты.
Если к массиву добавляют пользовательские свойства, for…in их тоже не обходит стороной. При выполнении кода по оным он тоже «пройдется». Когда перечисленные особенности не требуются, лучше задействовать в программном коде обычный оператор for.
For…of
В стандарте, начиная с ES6, появился цикл for…of. Он:
- используется для перебора итерируемых объектов;
- схож по принципу действия с for…of;
- метод Symbol.iterator имеет место у Array, String, Map, Set, arguments, Nodelist и так далее.
Вот пример применения данного оператора для произвольного перебора строчки:
Отличие от for…in
For…of сильно схож с For…in, но имеет некоторые отличия. Первое, на что нужно обратить внимание – это применение только для итерируемых объектов. Тех, в которых реализацию прошел итератор (Symbol.iterator). For…in итератор не применяет в ходе своей работы. Он годится для всех видов объектов.
Также необходимо учитывать, что «новый» вид цикла в стандарте ES6 занимается перебором так, как это определено непосредственно в итераторе. If в Array итератор реализован таким образом, что for…of проходит исключительно по значениям массива, он не будет включат в перебор не индексные свойства. В for…in организация проведена иначе. Тут произойдет «просмотр» всех свойств (имен ключей), включая наследуемые.
Об инструкциях break и continue
При выполнении цикла внутри его тела допускается использование инструкций break и continue. Первый вариант предназначается для того, чтобы прекратить работу текущего цикла. Это – своеобразная «пауза». При использовании команды происходит следующее:
- начинается работа цикла и его выполнение;
- происходит вход и передача управления инструкции;
- цикл останавливается при заданных условиях.
Есть также команда continue. Она тоже используется программерами для прекращения дальнейшего выполнения участка задействованного кода. Но при подобных обстоятельствах происходит переход к следующей итерации цикла.
Метки
Метка – это идентификатор с двоеточием. Указывается непосредственно перед циклом. Если используется ключевое слово break, произойдет переход к концу цикла, перед которым устанавливается соответствующая метка.
Когда применяется ключевик continue, осуществляется немедленное переключение к следующей итерации имеющегося циклического выполнения кода. Подразумевается тот «участок», перед которым стоит соответствующая метка.
При одиночном цикле упомянутый элемент не имеет места. Целесообразно применение оного в тех случаях, когда требуется выйти из нескольких циклов. Допускается задействование соответствующих операторов в тернарных.