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

На языке JavaScript существует 4 вида циклов:

  • Цикл for. Этот цикл используется, когда известно точное количество повторений одних и тех же инструкций.
  • Цикл while. Он предназначен для выполнения одних и тех же инструкций до тех пор, пока заданное условие истинно.
  • Цикл do...while. Данный цикл аналогичен циклу while, но условие проверяется не перед выполнением повторяющихся инструкций, а после них. Таким образом, в отличие от цикла while, даже если условие изначально ложное, инструкции выполнятся хотя бы один раз.
  • Цикл for...in. Он применяется, когда необходимо перебрать все свойства в объекте или каждый элемент в массиве.

Цикл for

Синтаксис цикла for:

for (инициализация; условие; финальное выражение) {
  /* тело цикла */
}
  • инициализация - это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
  • условие - это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина, то выполняется итерация, в противном случае цикл for завершает работу;
  • финальное выражение - это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
  • тело цикла - инструкции, выполнение которых нужно повторять.

Рассмотрим пример цикла, который выведет в консоль числа от 1 до 9:

var i;

// Цикл for от 1 до 9, с шагом 1
for (i = 1; i <= 9; i++) {
  console.log(i);
}

В этом примере:

  • инициализация: i = 1 (присвоение переменной i значения 1);
  • условие прекращение цикла: i <= 9 (значение переменной i не меньше 9);
  • выражение, которое нужно выполнять в конце каждой итерации: i++ (увеличение значение переменной i на 1);
  • инструкция, которую нужно выполнять: console.log(i) (выведение значения счётчика в консоль).

Необязательные части цикла for

В for блок инициализации является не обязательным.

var i = 1;

// Цикл for
for (; i <= 9; i++) {
  console.log(i);
}

Блок условия в цикле for тоже является не обязательным. Без условия цикл будет выполняться бесконечное количество раз. В этом случае чтобы его прервать (выйти из цикла) необходимо использовать инструкцию break.

var i;
      
// Цикл for
for (i = 1; ; i++) {
  if (i > 9) { // условие прерывание цикла
      break;
  }
  console.log(i);
}

Финальное выражение в for также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.

var i;
              
// Цикл for
for (i = 1; i <= 9 ; ) {
  console.log(i);
  i++;
}

Можно вообще опустить 3 выражения:

var i = 1;
                  
// Цикл for
for (; ; ) {
  if (i > 9) {
      break;
  }
  console.log(i);
  i++;
}

В качестве тела цикла for можно использовать пустое выражение (;).

Например:

var 
arrA = [8, 12, 24],
arrB = [];

for (i = 0; i < arrA.length; arrB[i] = arrA[i++] / 2) ;

console.log(arrB);
// [4, 6, 12]

Примеры использования for

Использование цикла for для перебора элементов массива:

var 
  arr = [2, 3, 5, 7, 11], // массив
  i = 0, // счетчик
  lenArr = arr.length; // длина массива

for (i; i < lenArr; i++) {
  console.log(arr[i]);
}

Инструкции break и continue

Кроме этого, внутри тела циклов могут использоваться специальные инструкции break и continue.

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

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

Пример, в котором выведим в консоль нечётные числа от 1 до 11:

var i;

for (i = 1; i <= 11; i++) {
  // если число в переменной i чётное, то переходим к следующей итерации
  if (i %2 === 0) {
      continue;
  }
  // выведим значение переменной i в консоль
  console.log(i);
}

// 1, 3, 5, 7, 9, 11

Цикл while выполняет одни и те же инструкции (тело цикла) до тех пор, пока истинно некоторое условие. Истинность условия проверяется перед каждым выполнением тела цикла. Если перед первой итерацией условие ложно, то цикл не выполняется ни разу.

Цикл while

// объявление переменной а и присвоение ей значения 0
var a=0;

//цикл while с условием a<=9
while (a<=9)
{
  //увеличиваем значение переменной на 1
  a++;
  //Если число чётное то пропускаем итерацию,
  //т.е. остаток от деления на 2 равен 0
  if (a%2==0) continue;
  //Выводим число на экран
  document.write(a+"<br>");
}

Цикл do...while, так же как и цикл while, выполняет одни и те же инструкции (тело цикла) до тех пор, пока некоторое условие истинно. Но в отличие от цикла while, в цикле do...while условие проверяется после каждого выполнения тела цикла. Если даже условие изначально ложно, то тело цикла всё равно выполнится один раз (т.к. условие проверяется после выполнения тела цикла).

Цикл do...while

// объявление переменной а и присвоение ей значения 0
var a=0;
 
//цикл do...while с условием a<=9
do
{
  //увеличиваем значение переменной на 1
  a++;
  //Если число чётное то пропускаем итерацию,
  //т.е. остаток от деления на 2 равен 0
  if (a%2==0) continue;
  //Выводим число на экран
  document.write(a+"<br>");
}
while (a<=9)

Как было отмечено выше, цикл for...in находит применение для перебора элементов массива и свойств объекта. На этом уроке мы рассмотрим только общий синтаксис цикла for...in, а более подробно познакомимся с ним в следующих уроках.

Цикл for...in

Принцип работы цикла for...in заключается в том, что переменная x принимает все имена свойств объекта y или индексы массива y. Таким образом, в каждой итерации вам доступно свойство объекта или элемент массива.