Существует несколько способов написания циклов, но одним из наиболее популярных является метод for.
Основная структура цикла for выглядит следующим образом:
for( инициализации переменной; проверки условия; изменения значения; )
{// выполнить какое-либо действие.}Ниже приведен пример цикла for в действии.
for( var i = 0; i <= 2; i++ )
{alert( i );
// Этот цикл вызовет три уведомления, с сообщением "0", "1" и "2" соответственно.}Материала довольно много, поэтому давайте разберем этот пример по частям.
- Во-первых, вызываем инструкцию for (), встроенную в JavaScript. Она сообщает: «Каждый раз, когда это верно, сделайте так». Теперь добавим к инструкции немного данных.
- var i = 0; — создается новая переменная i, со значением равным нулю. Нетрудно определить, что это переменная, по одному знаку равенства. Чаще всего встречается использование программистами буквы «i» (сокращения от «индекс») в качестве имени переменной, но в действительности можно использовать вместо него любое. Это распространенное условное обозначение, но не правило.
- Зададим начальное значение «0» потому, если нужно начинать отсчет с нуля. В конце концов, так считает JavaScript.
- 1 <= 2; — выражением i <= 2 подразумевает, что «до тех пор, пока i меньше или равно 2, нужно продолжать цикл». Поскольку отсчет начался с нуля, это означает, что цикл будет выполняться трижды.
- i++ — наконец, i++ — это сокращение, означающее «каждый раз, когда запускается этот цикл, добавьте одно из значений i (++ — это одно из сочетаний математических операторов).
Без этого шага, i всегда равно нулю, и цикл будет длиться вечно! К счастью, современные браузеры достаточно умны, чтобы не позволить этому случиться. Если одна из этих трех частей отсутствует, цикл совсем не будет выполняться.
А здесь расположен {код сценария}
Все, что находится внутри этих фигурных скобок, выполняется один раз для каждого повтора цикла, которых в данном случае три. Эта переменная i также доступна для использования в коде, который выполняется циклом. Давайте вернемся к примеру «проверить каждый элемент массива». Как написать цикл, который сделает это за нас?
var items = ["foo", "bar", "baz"]; // Сначала создадим массив.
for( var i = 0; i <= items.length; i++ )
{alert( items[i] ); // Создаст уведомление для каждого элемента в массиве.}Этот пример отличается от нашего первого цикла двумя ключевыми моментами:
- items.length
Вместо использования числа для ограничения количества запусков цикла здесь используется свойство, встроенное в JavaScript, для определения «длины» нашего массива, то есть количества содержащихся в нем элементов. И length — всего лишь одно из стандартных свойств и методов объекта Array в JavaScript.
- items[i]
Переменную i использовали, чтобы сослаться на каждый индекс в массиве. Если бы начали отсчет с нуля, и было бы установлено начальное значение i равное 1, первый элемент в массиве оказался бы пропущен.
Теперь, независимо от того, насколько большим или маленьким должен стать массив, цикл станет выполняться ровно столько раз, сколько элементов в массиве, и всегда будет содержать удобную ссылку на каждый из них.
Существуют буквально десятки способов написания цикла, но это — один из наиболее распространенных методов, который встречается в сценариях во всемирной паутине. Разработчики используют циклы для выполнения ряда задач, таких как:
- Запуск цикла по списку элементов на странице и проверка значения каждого из них путем применения стиля или добавления/удаления/изменения атрибутов. Например, можно запустить цикл по всем элементам веб-формы и убедиться, что пользователи ввели допустимое значение для каждого, прежде чем они смогут перейти дальше.
- Создание в исходном массиве нового массива элементов, которые имеют определенные значения. Для этого проверяется значение каждого элемента исходного массива в пределах цикла и, если значение соответствует искомому, заполняется новый массив только этими элементами, что превращает цикл в своего рода фильтр.