Циклы являются важным аспектом программирования, позволяя разработчикам многократно выполнять блок кода. В JavaScript существует три основных оператора цикла: for, while и do-while. В этом руководстве для начинающих мы рассмотрим основные концепции этих операторов цикла и то, как использовать их в вашем коде.

Навигация по статье

Цикл for

Цикл for — это наиболее часто используемый оператор цикла в JavaScript. Он позволяет вам выполнять блок кода определенное количество раз. Вот синтаксис цикла for:

for (initialization; condition; expression) {
  // code block to execute
}

Оператор initialization устанавливает начальное значение счетчика. Оператор condition проверяет, соответствует ли переменная счетчика определенному условию. Оператор expression обновляет переменную счетчика после каждой итерации. Вот пример того, как использовать цикл for в JavaScript:

for (let i = 0; i < 5; i++) {
  console.log("Iteration " + i);
}

Цикл while

Цикл while — это еще один тип инструкции цикла в JavaScript. Он позволяет вам многократно выполнять блок кода, пока выполняется определенное условие. Вот синтаксис цикла while:

while (condition) {
  // code block to execute
}

Условием может быть любое выражение, которое принимает логическое значение (true или false). Вот пример того, как использовать цикл while в JavaScript:

let i = 0;

while (i < 5) {
  console.log("Iteration " + i);
  i++;
}

Цикл do-while

Цикл do-while похож на цикл while, но с одним важным отличием: он выполняет блок кода по крайней мере один раз, даже если условие равно false. Вот синтаксис цикла do-while:

let i = 0;

do {
  console.log("Iteration " + i);
  i++;
} while (i < 5);

Операторы break и continue

Оператор break используется для досрочного завершения текущего цикла. Когда оператор break встречается внутри цикла, цикл немедленно завершается, и управление передается оператору, следующему за циклом. Вот пример:

for (var i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}
// Output: 0, 1, 2, 3, 4

В этом примере цикл будет выполнять итерацию по значениям i от 0 до 9. Однако, когда i достигает 5, выполняется оператор break, и цикл завершается досрочно. В результате на консоль выводятся только значения i от 0 до 4.

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

for (var i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}
// Output: 0, 1, 2, 3, 4, 6, 7, 8, 9

В этом примере цикл будет выполнять итерацию по значениям i от 0 до 9. Однако, когда i достигает 5, выполняется оператор continue, и текущая итерация пропускается. В результате значение i никогда не выводится на консоль, если оно равно 5.

Вложенные циклы

Вложенные циклы — это просто циклы, которые определены внутри других циклов. Внутренний цикл выполняется несколько раз для каждой итерации внешнего цикла. Вот пример:

for (var i = 0; i < 5; i++) {
  for (var j = 0; j < 3; j++) {
    console.log("i: " + i + ", j: " + j);
  }
}

В этом примере у нас есть два вложенных цикла for. Внешний цикл выполняет итерацию по значениям i от 0 до 4. Для каждой итерации внешнего цикла внутренний цикл повторяет значения j от 0 до 2. В результате консоль отобразит следующий вывод:

i: 0, j: 0
i: 0, j: 1
i: 0, j: 2
i: 1, j: 0
i: 1, j: 1
i: 1, j: 2
i: 2, j: 0
i: 2, j: 1
i: 2, j: 2
i: 3, j: 0
i: 3, j: 1
i: 3, j: 2
i: 4, j: 0
i: 4, j: 1
i: 4, j: 2

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

Например, вот как вы могли бы использовать вложенные циклы для перебора 2D-массива и регистрации каждого элемента в консоли:

var matrix = [  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (var i = 0; i < matrix.length; i++) {
  for (var j = 0; j < matrix[i].length; j++) {
    console.log(matrix[i][j]);
  }
}

В этом примере у нас есть 2D-матрица массива с тремя строками и тремя столбцами. Мы используем вложенный цикл for для перебора каждого элемента массива, начиная с первой строки и повторяя по очереди каждый столбец.

Цикл for-in

Тот for…in цикл — это специализированный цикл, который используется для перебора свойств объекта. Вот базовый синтаксис для for…in:

for (var prop in object) {
  // Do something with object[prop]
}

В этом цикле object — это объект, по которому вы хотите выполнить итерацию, а prop — это переменная, которой будет присвоено имя каждого свойства в object по очереди. Цикл будет выполняться один раз для каждого свойства объекта.

Вот пример того, как вы могли бы использовать for…in цикл для перебора свойств объекта и занесения их в консоль:

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

for (var prop in person) {
  console.log(prop + ": " + person[prop]);
}
// Output: "firstName: John", "lastName: Doe", "age: 30"

В этом примере for…in цикл выполняет итерацию по свойствам объекта person и записывает имя и значение каждого свойства в консоль.

Бесконечные циклы

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

Вот пример бесконечного цикла, у которого нет условия:

while (true) {
  // Do something here
}

В этом примере цикл while будет выполняться вечно, потому что условие true всегда истинно, и внутри цикла нет ничего, что могло бы выйти из него. Этот код будет продолжать выполняться до тех пор, пока программа не будет остановлена вручную.

Вот еще один пример бесконечного цикла, у которого есть условие, но это условие никогда не выполняется:

var i = 0;
while (i < 10) {
  // Do something here
}

В этом примере цикл будет продолжаться бесконечно, потому что условие i < 10 никогда не будет ложным. Это может произойти, если тело цикла никогда не изменяет значение i, или если оно изменяет его таким образом, что никогда не приводит к достижению условия.

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

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

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] === 5) {
    break;
  }
  console.log(numbers[i]);
}

В этом примере мы используем цикл for для перебора массива чисел. Мы используем оператор if внутри цикла, чтобы проверить, равно ли текущее число 5, и если это так, мы используем оператор break для выхода из цикла. Это гарантирует, что цикл завершится, как только он найдет число 5, вместо того, чтобы продолжать перебирать остальную часть массива.