Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / JavaScript /
Циклы в JavaScript
Думаю, каждый программист знает, что такое цикл. Но для начинающих кратко поясню: цикл - это последовательность одинаковых действий. То есть участок кода, который необходимо выполнить несколько раз. Подробнее о циклах вообще см. здесь.
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
В JavaScript, как и в большинстве других языков программирования, есть
несколько видов циклов: цикл с предусловие (while),
цикл с постусловием (do-while), цикл по параметру (for),
цикл перебора свойств объекта (for-in). Далее все эти виды циклов рассмотрим более подробно.
Цикл while в JavaScript
Цикл этого вида является основным. Синтаксис:
while (Выражение) Инструкция
В этом цикле сначала вычисляется Выражение. Если выражение ИСТИННО, то выполняется Инструкция. Если выражение ЛОЖНО, то цикл НЕ выполняется (либо прерывается).
Инструкций может быть несколько (в этом случае они должны быть заключены в операторные скобки).
Пример:
var i = 0;
while (i < 10)
{
document.write(i);
i = i + 1; //Обязательно!!!
}
В теле цикла мы каждый раз увеличиваем значение переменной i на единицу. Но мы это делаем уже ПОСЛЕ того, как выводим значение на экран. Поэтому в данном примере мы выводим числа от 0 до 9.
Почему только до 9? Потому что в нашем случае выражение (i < 10),
когда переменная i равна 10, уже будет ложным.
И, поскольку это цикл с предусловием (то есть мы СНАЧАЛА проверяем выражение,
а ПОТОМ, в зависимости от результата, выполняем или не выполняем цикл),
то тело цикла уже НЕ будет выполнено, когда i равна 10.
Цикл do-while в JavaScript
Синтаксис:
do Инструкция while (Выражение);
В этом цикле сначала выполняется Инструкция, затем вычисляется Выражение. Если выражение ИСТИННО, то цикл повторяется, если ложно, то прекращается. Поскольку выражение проверяется после выполнения тела цикла, такой цикл будет выполнен хотя бы один раз.
Также обратите внимание, что в конце точка с запятой обязательна (в цикле while точка с запятой не обязательна, если тело цикла заключено в фигурные скобки). Пример:
var i = 100;
do
{
document.write(i);
i = i + 1; //Обязательно!!!
}
while (i < 10);
В этом примере, несмотря на то, что проверяемое выражение изначально ложно
(100 < 10) == false, цикл всё-равно будет выполнен один раз и выведет на экран число 100.
Цикл for в JavaScript
Это, пожалуй, самый удобный и безопасный цикл. Безопасный, потому что сделать его бесконечным почти невозможно. И простой, потому что значение переменной-счётчика не надо увеличивать в теле цикла - оно увеличивается автоматически. Синтаксис:
for (Инициализация; Выражение; Счётчик) Инструкция;
Для понимания лучше сразу покажу пример:
for (i = 0; i < 10; i++) document.write(i);
Мы здесь делаем то же самое, что и в примере с циклом while, однако весь исходный код поместился в одну строчку и нам не надо писать лишние строки. К тому же мы здесь точно не забудем увеличивать или уменьшать счётчик, и таким образом избежим бесконечного цикла.
Цикл for-in в JavaScript
Если вы пока не сталкивались с объектно-ориентированным программированием (ООП), то с таким видом цикла вы не встречались. Синтаксис:
for (Переменная in Объект) Инструкция;
Здесь Переменная должна быть либо именем переменной, либо инструкцией var, объявляющей переменную, либо элементом массива, либо свойством объекта (то есть должна быть чем-то таким, что может находиться левой части выражения присваивания). Параметр Объект – это имя объекта или выражение, результатом которого является объект.
Этот цикл предоставляет возможность перебора всех свойств Объекта. Тело такого цикла выполняется один раз для каждого свойства Объекта.
Пример:
var Coord = {x:10, y:5, z:15};
for (var p in Coord)
document.write("Coord." + p + " = " + Coord[p] + "<br>");
Здесь мы сначала создаём объект Coord, у которого есть свойства x, y, z. Затем в цикле перебираем эти свойства и выводим на экран их имена и значения. В итоге на экран будет выведено:
Coord.x = 10 Coord.y = 5 Coord.z = 15
Надо сказать, что не все свойства объектов видны циклу for-in, и также есть довольно много особенностей использования этого цикла. Но это отдельная и довольно большая тема.
Бесконечный цикл в JavaScript
ВАЖНО! Не забывайте, что циклы могут быть бесконечными, что приведёт к зависанию вашего сценария. Чтобы этого избежать - в теле цикла не должно быть кода, который каким-то образом может привести к тому, что Выражение всегда будет истинным.
Примеры бесконечных циклов:
var i = 0;
//Бесконечный цикл, где мы забыли о счётчике
while (i < 10)
{
document.write(i);
}
//Бесконечный цикл, где мы уменьшаем счётчик, а не увеличиваем
while (i < 10)
{
document.write(i);
i--;
}
//Цикл for при желании тоже можно сделать бесконечным
for (i = 0; i < 10; i++)
{
document.write(i);
i = 0;
}
Наиболее часто новички совершают ошибку из первого примера, то есть просто
забывают про счётчик. Обратите внимание на цикл for - его при желании тоже можно сделать бесконечным.
Прерывание и продолжение циклов в JavaScript
Иногда необходимо прервать цикл раньше, чем он закончит все итерации. В других случаях требуется пропустить некоторые итерации. Подробно об этом я написал здесь, так что повторяться не буду.
Скажу только, что для прерывания цикла используется инструкция break,
а для продолжения - continue. Примеры:
var i = 1;
for (i = 1; i < 10; i++)
{
document.write('Привет, МИР! ' + i + '<br>');
if (i == 5) break;
else document.write('Эта строка не будет выведена 5-й раз!<br>');
}
i = 0;
while (i < 10)
{
i++;
if (i == 5)
{
document.write('Строка № 5 не будет выведена<br>');
continue;
}
document.write('Привет, МИР! ' + i + '<br>');
}
Если в примерах что-то непонятно, то пояснения см. здесь.
Вложенный цикл в JavaScript
Циклы могут быть вложенными. Пример:
for (var i = 1; i < 5; i++) //Строки
for (var j = 1; j < 4; j++) //Столбцы
{
document.write(' | ' + i + '-' + j);
if (j == 3) document.write(' | <br>');
}
Здесь вложенный цикл выделен красным цветом. Этот пример выведет на экран таблицу из 4-х строк и 3-х столбцов:
| 1-1 | 1-2 | 1-3 | | 2-1 | 2-2 | 2-3 | | 3-1 | 3-2 | 3-3 | | 4-1 | 4-2 | 4-3 |
ВНИМАНИЕ! Помните, что инструкция break выполняет выход
только из самого внутреннего цикла. То есть если break используется во вложенном цикле, то этот цикл прервётся, но внешний цикл будет продолжать работу.
Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>