Пошук уроків, статей та іншого контенту
Навчіться використовувати цикл for з ініціалізацією, умовою та кроком. Розберіть один із найпоширеніших способів організації повторюваних операцій у JavaScript.
forЦикл for дає змогу багаторазово виконати один і той самий блок коду.
Він особливо корисний, коли:
потрібно виконати дію певну кількість разів;
потрібно перебрати елементи масиву;
відомі початкове та кінцеве значення лічильника.
Наприклад, виведемо числа від 1 до 5:
for (let number = 1; number <= 5; number++) {
console.log(number);
}Результат:
1
2
3
4
5forЗагальний синтаксис має такий вигляд:
for (ініціалізація; умова; крок) {
// код, який повторюється
}Цикл складається з трьох частин:
Ініціалізація — виконується один раз перед початком циклу.
Умова — перевіряється перед кожною ітерацією.
Крок — виконується після кожної ітерації.
Зазвичай під час ініціалізації створюють змінну-лічильник:
let number = 1У циклі for ця змінна часто називається i:
for (let i = 0; i < 5; i++) {
console.log(i);
}Умова визначає, чи потрібно виконувати наступну ітерацію.
У прикладі:
i < 5Цикл працює, поки значення i менше за 5.
Крок змінює значення лічильника після кожного виконання тіла циклу:
i++Оператор i++ збільшує значення i на одиницю. Це скорочений запис:
i = i + 1;Розглянемо цей код:
for (let i = 1; i <= 3; i++) {
console.log(`Ітерація: ${i}`);
}JavaScript виконує його в такому порядку:
Створює змінну i зі значенням 1.
Перевіряє умову i <= 3.
Якщо умова істинна, виконує код у фігурних дужках.
Виконує крок i++.
Знову перевіряє умову.
Повторює ці дії, доки умова не стане хибною.
Результат:
Ітерація: 1
Ітерація: 2
Ітерація: 3Коли i стає рівним 4, умова 4 <= 3 повертає false, тому цикл завершується.
У програмуванні часто починають лічбу з нуля:
for (let i = 0; i < 5; i++) {
console.log(i);
}Результат:
0
1
2
3
4Зверніть увагу: цикл виконується п’ять разів, хоча останнє значення лічильника — 4.
Це відбувається тому, що умова i < 5 не допускає значення 5.
Щоб отримати числа від 0 до 5 включно, використовуйте умову i <= 5:
for (let i = 0; i <= 5; i++) {
console.log(i);
}Лічильник можна зменшувати за допомогою оператора --:
for (let i = 5; i >= 1; i--) {
console.log(i);
}Результат:
5
4
3
2
1Оператор i-- — це скорочений запис:
i = i - 1;Також можна змінювати лічильник на інше значення:
for (let i = 0; i <= 10; i += 2) {
console.log(i);
}Результат:
0
2
4
6
8
10Оператор i += 2 збільшує i на 2.
У тілі циклу можна виконувати будь-які операції:
let sum = 0;
for (let i = 1; i <= 5; i++) {
sum = sum + i;
}
console.log(sum);У кожній ітерації до змінної sum додається поточне значення i.
Обчислення відбувається так:
sum = 0 + 1
sum = 1 + 2
sum = 3 + 3
sum = 6 + 4
sum = 10 + 5
Результат:
15Скорочений варіант цього запису:
let sum = 0;
for (let i = 1; i <= 5; i++) {
sum += i;
}
console.log(sum);for і масивиЦикл for часто використовують для перебору елементів масиву.
Індекси масиву починаються з 0, тому лічильник зазвичай починають із 0 і виконують цикл, поки індекс менший за довжину масиву:
const fruits = ["яблуко", "банан", "апельсин"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}Результат:
яблуко
банан
апельсинТут:
i — індекс поточного елемента;
fruits.length — кількість елементів у масиві;
fruits[i] — елемент масиву з індексом i.
Індекси масиву мають такий вигляд:
fruits[0] — "яблуко"
fruits[1] — "банан"
fruits[2] — "апельсин"Використання fruits.length зручне тим, що цикл продовжить працювати правильно, навіть якщо кількість елементів масиву зміниться.
const prices = [120, 80, 250, 50];
let total = 0;
for (let i = 0; i < prices.length; i++) {
total += prices[i];
}
console.log(`Загальна сума: ${total} грн`);Результат:
Загальна сума: 500 грнНа кожній ітерації поточна ціна додається до змінної total.
У циклі можна використовувати умовний оператор if.
Наприклад, виведемо лише парні числа:
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
console.log(i);
}
}Оператор % повертає остачу від ділення. Якщо число ділиться на 2 без остачі, воно парне.
Результат:
2
4
6
8
10break і continuebreakОператор break повністю припиняє виконання циклу.
for (let i = 1; i <= 10; i++) {
if (i === 4) {
break;
}
console.log(i);
}Результат:
1
2
3Коли i дорівнює 4, цикл одразу завершується.
continueОператор continue пропускає поточну ітерацію та переходить до наступної.
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue;
}
console.log(i);
}Результат:
1
2
4
5Число 3 не виводиться, але цикл продовжується.
Наступна програма знаходить найбільше число в масиві:
const numbers = [12, 5, 27, 9, 18];
let largest = numbers[0];
for (let i = 1; i < numbers.length; i++) {
if (numbers[i] > largest) {
largest = numbers[i];
}
}
console.log(`Найбільше число: ${largest}`);Результат:
Найбільше число: 27Спочатку найбільшим вважається перший елемент масиву. Потім цикл порівнює його з кожним наступним елементом і замінює значення largest, якщо знаходить більше число.
Один цикл for можна розмістити всередині іншого. Такі цикли називають вкладеними.
Наприклад, виведемо таблицю множення для чисел від 1 до 3:
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
console.log(`${i} * ${j} = ${i * j}`);
}
}Зовнішній цикл змінює значення i, а для кожного значення i внутрішній цикл повністю проходить значення j від 1 до 3.
Вкладені цикли корисні для роботи з:
таблицями;
матрицями;
комбінаціями значень.
Однак із великими даними вони можуть виконуватися повільніше, тому використовувати їх потрібно обдумано.
for (let i = 0; i <= numbers.length; i++) {
console.log(numbers[i]);
}Тут використано i <= numbers.length, хоча останній допустимий індекс масиву дорівнює numbers.length - 1.
Правильний варіант:
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}for (let i = 1; i <= 5;) {
console.log(i);
}У цьому коді i не змінюється, тому умова завжди залишається істинною. Цикл стане нескінченним.
Потрібно додати крок:
for (let i = 1; i <= 5; i++) {
console.log(i);
}for (let i = 5; i >= 1; i++) {
console.log(i);
}Умова перевіряє, чи i більше або дорівнює 1, але i збільшується. Тому цикл не завершиться.
Для зворотної лічби потрібно зменшувати лічильник:
for (let i = 5; i >= 1; i--) {
console.log(i);
}const colors = ["червоний", "зелений", "синій"];
for (let i = 0; i <= colors.length - 1; i++) {
console.log(colors[i]);
}Цей варіант працює, але запис можна зробити зрозумілішим:
for (let i = 0; i < colors.length; i++) {
console.log(colors[i]);
}Умова i < colors.length є стандартною для перебору масиву.
forЦикл for добре підходить, коли:
потрібен лічильник;
потрібно виконати код задану кількість разів;
необхідно отримати індекс елемента масиву;
потрібно рухатися вперед або назад;
крок може бути не лише 1, а й іншим значенням.
Для простого перебору значень масиву також існують інші конструкції, наприклад for...of, але цикл for важливо опанувати, оскільки він дає найбільший контроль над індексом, умовою та кроком.
Створіть програму, яка:
містить масив оцінок;
перебирає всі оцінки за допомогою циклу for;
обчислює їхню суму;
обчислює середнє значення;
виводить результат у консоль.
Приклад розв’язання:
const grades = [10, 8, 9, 12, 7];
let total = 0;
for (let i = 0; i < grades.length; i++) {
total += grades[i];
}
const average = total / grades.length;
console.log(`Сума оцінок: ${total}`);
console.log(`Середня оцінка: ${average}`);Результат:
Сума оцінок: 46
Середня оцінка: 9.2Цикл for повторює виконання блоку коду.
Його синтаксис містить ініціалізацію, умову та крок.
Ініціалізація виконується один раз на початку.
Умова перевіряється перед кожною ітерацією.
Крок виконується після кожної ітерації.
Для перебору масиву зазвичай використовують i = 0 та умову i < array.length.
Оператор break повністю завершує цикл.
Оператор continue пропускає поточну ітерацію.
Потрібно стежити, щоб лічильник змінювався і цикл міг завершитися.