for

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

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

• инициализация Необязательный
  • : Выражение (включая выражения присваивания) или объявление переменной, вычисляемое один раз перед началом цикла. Обычно используется для инициализации переменной счетчика. Это выражение может опционально объявлять новые переменные с ключевыми словами var или let. Переменные, объявленные с помощью var, не являются локальными для цикла, т.е. они находятся в той же области видимости, что и цикл for. Переменные, объявленные с помощью let, являются локальными для оператора и не доступны за пределами цикла.
  Результат выполнения этого выражения отбрасывается.
• условие Необязательный
  • : Выражение, которое будет выполнятся перед каждой итерацией цикла. Если выражение оценивается как true, инструкция выполняется. Если выражение оценивается как false, выполнение выходит из цикла и переходит к первой инструкции после конструкции for.
  Условие не является обязательным. Если его нет, условие всегда всегда оценивается как true.
• финальное выражение Необязательный
  • : Выражение, выполняющееся в конце итерации цикла. Происходит до следующего выполнения условия. Обычно используется для обновления или увеличения переменной счётчика.
• инструкция
  • : Инструкция, которая выполняется, когда условие цикла истинно. Чтоб выполнить множество инструкций в цикле, используйте блок инструкций ({ ... }) для группировки этих инструкций. Чтобы не выполнять никакой инструкции в цикле, используйте пустую инструкцию (;).

Следующий цикл 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);
}

Все 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 вычисляет смещение позиции узла в секции [финальное выражение], и, следовательно, не требует использования инструкции или блока инструкций внутри цикла, вместо этого используется точка с запятой (пустая инструкция).

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