логотип PurpleSchool
логотип PurpleSchool

Цикл for в JavaScript - примеры, условия, break, continue

Автор

Виталий Котов

В JavaScript циклы используются для повторения блока кода.

Например, если нужно показать сообщение 100 раз, можно использовать цикл. Это всего лишь простой пример; с помощью циклов можно добиться гораздо большего.

Синтаксис цикла for следующий:

for (initialExpression; condition; updateExpression) {
  // тело цикла
}
  1. initialExpression инициализирует и/или объявляет переменные и выполняется только один раз.
  2. Оценивание condition (условие).
    • Если условие - false, цикл for завершается.
    • Если условие - true, выполняется блок кода внутри цикла for.
  3. Выражение updateExpression обновляет значение initialExpression, когда условие равно true.
  4. condition (условие) оценивается снова. Этот процесс продолжается до тех пор, пока условие не станет false.

Пример 1: Вывести текст пять раз

// программа для вывода текста на консоль 5 раз
const n = 5;

// цикл от i = 1 до 5
for (let i = 1; i <= n; i++) {
  console.log(`Я люблю JavaScript.`);
}

Вывод в консоль:

Я люблю JavaScript.
Я люблю JavaScript.
Я люблю JavaScript.
Я люблю JavaScript.
Я люблю JavaScript.

Пример 2: Вывод чисел от 1 до 5

// программа для вывода чисел от 1 до 5
const n = 5;

// цикл от i = 1 до 5
// на каждой итерации i увеличивается на 1
for (let i = 1; i <= n; i++) {
  console.log(i); // вывод на консоль значения i
}

Вывод в консоль:

1
2
3
4
5

Пример 3: Вывод суммы n натуральных чисел

// программа для вывода суммы натуральных чисел
let sum = 0;
const n = 100;

// цикл от i = 1 до n
// на каждой итерации i увеличивается на 1
for (let i = 1; i <= n; i++) {
  sum += i; // sum = sum + i
}

console.log('сумма:', sum);

Вывод в консоль:

сумма: 5050

Здесь значение sum изначально равно 0. Затем выполняется итерация цикла for от i = 1 до 100. На каждой итерации i добавляется к sum и ее значение увеличивается на 1.

Когда i станет равным 101, условие проверки станет false и sum будет равна 0 + 1 + 2 + ... + 100.

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

Если условие проверки в цикле for всегда true, он будет работать вечно (пока не заполнится память). Например,

// бесконечный цикл
for (let i = 1; i > 0; i++) {
  // тело цикла
}

В приведенной выше программе условие всегда true, что приведет к выполнению кода бесконечное число раз.

Цикл for или while

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

// этот цикл итерируется 5 раз
for (let i = 1; i <= 5; ++i) {
  // тело цикла
}

Циклы while и do...while обычно используются, когда количество итераций неизвестно. Например:

while (condition) {
  // тело цикла
}
Стрелочка влевоЦиклы в JavaScript – всё о циклах while, for, do-while

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний