Введение

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

Интерактивный пример

let str = "";for (let i = 0; i < 9; i++) {  str = str + i;}console.log(str);// Expected output: "012345678"

Синтаксис

for ([инициализация]; [условие]; [финальное выражение])  [инструкция]

• инициализацияНеобязательный

  • : Выражение (включаявыражения присваивания) или объявление переменной, вычисляемое один раз перед началом цикла. Обычно используется для инициализации переменной счетчика. Это выражение может опционально объявлять новые переменные с ключевыми словамиvar илиlet. Переменные, объявленные с помощьюvar, не являются локальными для цикла, т.е. они находятся в той же области видимости, что и циклfor. Переменные, объявленные с помощьюlet, являются локальными для оператора и не доступны за пределами цикла.

  Результат выполнения этого выражения отбрасывается.

• условиеНеобязательный

  • : Выражение, которое будет выполнятся перед каждой итерацией цикла. Если выражениеоценивается как true, инструкция выполняется. Если выражениеоценивается как false, выполнение выходит из цикла и переходит к первой инструкции после конструкцииfor.

  Условие не является обязательным. Если его нет, условие всегда всегда оценивается какtrue.

• финальное выражениеНеобязательный

  • : Выражение, выполняющееся в конце итерации цикла. Происходит до следующего выполнения условия. Обычно используется для обновления или увеличения переменной счётчика.

• инструкция

  • : Инструкция, которая выполняется, когда условие цикла истинно. Чтоб выполнить множество инструкций в цикле, используйтеблок инструкций ({ ... }) для группировки этих инструкций. Чтобы не выполнять никакой инструкции в цикле, используйтепустую инструкцию (;).

Примеры

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

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

for (let i = 0; i < 9; i++) {  console.log(i);  // ещё какие-то инструкции}

Синтаксис блока инициализации

В блоке инициализации возможно как объявления переменных, так и более сложные выражения. Однако выражения не могут использовать операторin без скобок, потому что это конфликтует с цикломfor...in.

for (let i = "start" in window ? window.start : 0; i < 9; i++) {  console.log(i);}// SyntaxError: 'for-in' loop variable declaration may not have an initializer.

// Все выражение инициализации переменной взято в скобкиfor (let i = ("start" in window ? window.start : 0); i < 9; i++) {  console.log(i);}// Выражение `in` взято в скобкиfor (let i = ("start" in window) ? window.start : 0; i < 9; i++) {  console.log(i);}

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

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

Например, в блоке инициализации не требуется определять переменные:

let i = 0;for (; i < 9; i++) {  console.log(i);  // ещё выражения}

Как и блок инициализации, блок условия не обязателен. Если пропустите это выражение, вы должны быть уверены, что прервёте цикл где-то в теле, а не создадите бесконечный цикл.

for (let i = 0; ; i++) {  console.log(i);  if (i > 3) break;  // тут какой-то код}

Вы можете пропустить все 3 блока. Снова убедитесь, что используетеbreak, чтоб закончить цикл, а также изменить счётчик, так что условие для break было истинно в нужный момент.

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

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

Следующий циклfor вычисляет смещение позиции узла в секции[финальное выражение], и, следовательно, не требует использования инструкции илиблока инструкций внутри цикла, вместо этого используется точка с запятой (пустая инструкция).

function showOffsetPos(id) {  let left = 0,    top = 0;  for (    let itNode = document.getElementById(id); // инициализация    itNode; // условие    left += itNode.offsetLeft,      top += itNode.offsetTop,      itNode = itNode.offsetParent // финальное выражение  ); // точка с запятой (пустая инструкция)  console.log(    `Смещение позиции элемента "${id}":слева: ${left}px;сверху: ${top}px;`,  );}showOffsetPos("content");// Выводит:// Смещение позиции элемента "content":// слева: 0px;// сверху: 153px;"

Спецификации

Совместимость с браузерами

Смотрите также

• пустая инструкция
• break
• continue
• empty
• while
• do...while
• for...in
• for...of