Раздел: Сайтостроение / JavaScript /

Циклы в JavaScript

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении 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 с нуля до гуру >>>


Программирование на JavaScript с Нуля до Гуру 2.0 Программирование на JavaScript

Видеокурс о программировании на JavaScript. Содержит 8 больших разделов от основ до работы с сетевыми запросами. В комплекте 5 подарков - мини-курсов по темам, связанным с сайтостроением. 72 урока продолжительностью более 13 часов. Упражнения и примеры исходных кодов. Поддержка от автора. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика