Цикл for в JavaScript: синтаксис и примеры использования

При написании скриптов очень часто возникает задача выполнить однотипное действие много раз. Именно для этой цели придуманы циклы. Они повторяют блок кода до тех пор, пока не будет выполнено определенное условие. 

Цикл for запускает один и тот же код, пока проверка условия выводит true. Если же условие приобретет значение false, код не будет выполняться, и программа продолжит работу со строки, которая следует сразу после цикла.

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

Давайте воспользуемся базовым примером, чтобы показать, как работает цикл for в JavaScript. 

Вот цикл, который выводит числа от 0 до значений, которые меньше 5:

for (var i = 0; i < 5; i++) { console.log(i); };

Разберем подробнее: for ([инициализация]; [условие]; [завершающая операция])выражение

Код выведет следующее:

0 1 2 3 4

Так, код выполнялся неоднократно, пока не было выполнено условие цикла. Когда число 4 выводится на консоль, цикл останавливается, поскольку мы поставили задачу выводить числа в диапазоне от 0 до значения, которое будет меньше 5.

Цикл for состоит из трех основных частей:

1. Инициализация — используется для объявления переменной счетчика. Она объявляет переменную, которая отслеживает, сколько раз цикл был выполнен. В приведенном выше примере был использован var i = 0. Это указывает программе запустить счетчик с именем i, имеющий начальное значение 0 (ноль). Это стандартное имя для переменной инициализации, но вы можете использовать любое имя, какое захотите.
2. Проверка условия — выражение, которое оценивается перед запуском каждого цикла. Если условие приобретает значение true, код внутри цикла for будет выполнен. Если условие — false, цикл прекращает работу. В цикле выше используется условие i < 5. Это говорит программе, что цикл должен выполняться только тогда, когда переменная i меньше 5. Если i равно или больше 5, цикл остановится.
3. Завершение — в конце код использует i ++ в качестве приращения. Эта функция указывает программе добавлять единицу к переменной i при каждом выполнении цикла.

Вторая и третья операции выполняется до тех пор, пока условие выводит true.

Виды циклов

Ниже представлены основные виды циклов в JavaScript: 

• for — когда известно, сколько раз потребуется что-то сделать.
• while — когда заранее неизвестно, сколько раз потребуется что-то сделать.
• do…while — работает по принципу цикла while. Основное отличие в том, что цикл do…while будет выполнять код, даже когда условие будет выводить false.
• for…in — используется, когда нужно обойти свойства объектов.
• for/of — перебирает значения итеративного объекта.
• Бесконечный цикл — программа будет выполнять код до тех пор, пока будет включен компьютер. Создается с помощью цикла for.
• Вложенный цикл — выполняет код внутри другого цикла. Создается с помощью циклов for и while.

Использование цикла for

Как же использование циклов поможет в написании кода? Как уже говорилось, все циклы связаны с повторением одного и того же действия вновь и вновь, что идеально подходит для быстрого выполнения повторяющихся задач.

Часто код будет немного отличаться на каждой последующей итерации цикла. Это означает, что можно «одним движением» выполнить целый набор задач вместо того, чтобы писать множество строк кода.

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

Для начала объявляется переменная i со значением 0 (ноль). Затем условие оценивает, что i меньше 7 и далее выполняется код, что каждый раз увеличивает значение переменной на единицу.

for (var i = 0; i < 7; i++) {   console.log(i);}

Код выводит следующее:

0 1 2 3 4 5 6

Необязательные выражения в цикле for

Все три операции в цикле for можно пропустить.

Обычно сначала прописывается переменная, к примеру, var i = 0. Однако в циклах JavaScript вы можете опустить значение переменной:

for (; i < 7; i++) {    console.log(i);}

Также можно не указывать проверку условия. Но если вы пропускаете блок условия, используйте break где-то в коде, иначе вы получите бесконечный цикл. Оператор break заставит программу прекратить обработку цикла и перейти к коду, который следует за ним.

for (var i = 0;; i++) {   console.log(i);

   if (i > 3) break;}

Кроме того, вы можете опустить все три блока. Проверьте, что вы прервали цикл с помощью break, а также указали нужное значение в счетчике, чтобы в конечном итоге условие вывело true.

var i = 0;

for (;;) {  if (i > 3) break;  console.log(i);  i++;}

Использование цикла for без блока выражений

В цикле for в JavaScript использование блока выражений можно также опустить. Это, конечно, сократит объем работы, но для начала советуем придерживаться традиционного синтаксиса цикла for.  

В этом случае важно помнить, что код должен заканчиваться на точку с запятой (;), иначе будет нарушен синтаксис программы.

function showOffsetPos (sId) {

  var nTop = 0, nLeft = 0;

 for (var oItNode = document.getElementById(sId); 

       oItNode; 

       nTop += oItNode.offsetTop, nLeft += oItNode.offsetLeft, oItNode = oItNode.offsetParent)

    console.log("Смещение позиции узла объекта\"" + sId + "\":\n left: " + nLeft + "px;\n top: " + nTop + "px;");

}

// Пример вызова:

showOffsetPos("content");

Результат: 

"Смещение позиции узла объекта "content":

left: 0px;

top: 153px;"