Оператор for в JavaScript

Определение и использование

Оператор for создает цикл, который выполняется до тех пор, пока условие истины.

Цикл продолжается до тех пор, пока условие истины. Он останавливается только когда условие становится ложно.

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

  • for - повторяющийся цикл кода
  • for/in - пронос через свойства объекта
  • for/of - Цикл遍ения значений итерируемого объекта
  • while - Цикл кодового блока при условии, что это условие истинно
  • do/while - Выполнение одного кодового блока, затем повторение цикла при условии, что это условие истинно

Совет:Используйте оператор break для выхода из цикла, и оператор continue для пропуска某个 значения в цикле.

Пример

Цикл кодового блока пять раз:

var text = "";
var i;
for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Попробуйте сами

Ниже страницы есть больше примеров TIY.

Грамматика

for (statement 1; statement 2; statement 3) {
  блок кода, который нужно выполнить
}

Значение параметра

Параметр Описание
statement1

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

Комментарий:Этот параметр можно пропустить. Но не пропускайте точку с запятой ";"
statement2

Опционально. Определяет условие выполнения цикла (блока кода). Обычно это предложение используется для оценки условия переменной счетчика. Если возвращается true, цикл начнется снова, если возвращается false, цикл завершится.

Комментарий:Этот параметр можно пропустить. Но не пропускайте точку с запятой ";". Кроме того, если параметр пропущен, необходимо предоставить break в цикле. В противном случае цикл никогда не закончится, что приведет к краху вашего браузера.
statement3

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

Комментарий:Этот параметр можно пропустить (например, увеличить/уменьшить значение в цикле).

Технические детали

Версия JavaScript: ECMAScript 1

Более примеров

Пример

Цикл перебирает индексы массива, собирая имена автомобилей из массива cars:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Попробуйте сами

Пример объяснения:

  • Сначала мы устанавливаем переменную до начала цикла (var i = 0;)
  • Затем мы определяем условие выполнения цикла. Цикл продолжается, пока переменная меньше длины массива (т.е. 4)
  • Переменная увеличивается на один (i++) каждый раз при выполнении цикла
  • Как только переменная больше не меньше 4 (длина массива), условие ложно, цикл заканчивается

Пример

Инициализация нескольких значений в первом параметре:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i;
for (i = 0, len = cars.length, text = ""; i < len; i++) { 
  text += cars[i] + "<br>";
}

Попробуйте сами

Пример

Пропуск первого параметра (установка значения до начала цикла):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Попробуйте сами

Пример

Использование оператора continue - Пропуск кодового блока цикла, но пропуск значения "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

Попробуйте сами

Пример

Использование оператора break - выполнение фрагмента кода, но выход из цикла, когда переменная i равна "3":

var text = ""
var i;
for (i = 0; i < 5; i++) {
  if (i == 3) {
    break;
  }
  text += "The number is " + i + "<br>";
}

Попробуйте сами

Пример

Пропуск второго параметра. В этом примере мы также используем оператор break для выхода из цикла, когда i равен "3" (если пропускается второй параметр, то必须在 цикле предоставить break. В противном случае цикл никогда не закончится, и ваш браузер упадет):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = 0; ; i++) {
  if (i == 3) {
    break;
  }
  text += cars[i] + "<br>";
}

Попробуйте сами

Пример

Обход массива по индексам в обратном порядке (отрицательное увеличение):

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = "";
var i;
for (i = cars.length - 1; i >= 0; i--) {
  text += cars[i] + "<br>";
}

Попробуйте сами

Пример

Пропуск последнего параметра и увеличение значения в цикле:

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var len = cars.length;
for (; i < len;) { 
  text += cars[i] + "<br>";
  i++;
}

Попробуйте сами

Пример

Обход NodeList объектов узлов и изменение фона цвета всех элементов <p> в списке:

var myNodelist = document.getElementsByTagName("P");
var i;
for (i = 0; i < myNodelist.length; i++) {
  myNodelist[i].style.backgroundColor = "red";
}

Попробуйте сами

Пример

Пример вложенных циклов (цикл в цикле):

var text = "";
var i, j;
for (i = 0; i < 3; i++) {
  text += "<br>" + "i = " + i + ", j = "; 
  for (j = 10; j < 15; j++) {
    document.getElementById("demo").innerHTML = text += j + " ";
  }
}

Попробуйте сами

Поддержка браузеров

Указания Chrome IE Firefox Safari Opera
for Поддержка Поддержка Поддержка Поддержка Поддержка

Соответствующие страницы

JavaScript руководство:Цикл for в JavaScript

Руководство JavaScript:Конструкция for ... in в JavaScript

Руководство JavaScript:Конструкция break в JavaScript

Руководство JavaScript:Конструкция continue в JavaScript

Руководство JavaScript:Конструкция while в JavaScript