Пошук уроків, статей та іншого контенту
Освоїте перебір елементів через for, for...of і метод forEach з використанням callback-функцій.
Перебір масиву — це послідовне опрацювання кожного його елемента.
Наприклад, масив містить список оцінок:
const scores = [10, 8, 12, 9];Під час перебору можна:
вивести елементи;
обчислити суму;
змінити дані;
перевірити умову;
створити новий масив.
У JavaScript для перебору масивів найчастіше використовують:
цикл for;
цикл for...of;
метод forEach().
forЦикл for дозволяє вручну керувати лічильником і має такий вигляд:
for (початкове_значення; умова; зміна_лічильника) {
// код, який виконується на кожній ітерації
}Переберімо масив чисел:
const numbers = [10, 20, 30, 40];
for (let index = 0; index < numbers.length; index++) {
console.log(numbers[index]);
}Результат:
10
20
30
40let index = 0 — створюється лічильник із початковим значенням 0.
index < numbers.length — перевіряється, чи не вийшов індекс за межі масиву.
numbers[index] — отримується елемент за поточним індексом.
index++ — індекс збільшується на одиницю.
Кроки повторюються, поки умова залишається істинною.
Індекси масиву починаються з нуля:
const fruits = ["яблуко", "банан", "апельсин"];
console.log(fruits[0]); // яблуко
console.log(fruits[1]); // банан
console.log(fruits[2]); // апельсинВластивість length повертає кількість елементів:
console.log(fruits.length); // 3Цикл for зручний, коли потрібен індекс елемента:
const users = ["Олена", "Андрій", "Марія"];
for (let index = 0; index < users.length; index++) {
console.log(`${index + 1}. ${users[index]}`);
}Результат:
1. Олена
2. Андрій
3. МаріяТут index + 1 використовується лише для нумерації з одиниці. Сам індекс масиву все одно починається з нуля.
for...ofЦикл for...of послідовно перебирає значення масиву. Він простіший, коли індекс не потрібен.
const colors = ["червоний", "зелений", "синій"];
for (const color of colors) {
console.log(color);
}Результат:
червоний
зелений
синійЗмінна color на кожній ітерації містить поточний елемент масиву.
const prices = [100, 250, 80];
let total = 0;
for (const price of prices) {
total += price;
}
console.log(total); // 430Цикл for...of добре підходить для читання елементів:
const tasks = ["Прочитати документацію", "Написати код", "Запустити тести"];
for (const task of tasks) {
console.log(`Завдання: ${task}`);
}У циклах for і for...of можна використовувати:
break — повністю зупинити цикл;
continue — пропустити поточну ітерацію.
const numbers = [2, 4, 6, 7, 8, 10];
for (const number of numbers) {
if (number % 2 !== 0) {
console.log("Знайдено непарне число");
break;
}
console.log(number);
}Результат:
2
4
6
Знайдено непарне числоКоли цикл зустрічає 7, команда break завершує його виконання.
Приклад із continue:
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number % 2 === 0) {
continue;
}
console.log(number);
}Результат:
1
3
5Парні числа пропускаються, а непарні виводяться.
forEach()forEach() — це метод масиву, який викликає передану функцію для кожного елемента.
const fruits = ["яблуко", "банан", "апельсин"];
fruits.forEach(function (fruit) {
console.log(fruit);
});Функція, яку передають іншій функції для подальшого виклику, називається callback-функцією.
У цьому прикладі callback-функція:
function (fruit) {
console.log(fruit);
}Метод forEach() викликає її один раз для кожного елемента масиву.
Той самий приклад можна записати коротше:
const fruits = ["яблуко", "банан", "апельсин"];
fruits.forEach((fruit) => {
console.log(fruit);
});Якщо callback-функція містить лише одну інструкцію, фігурні дужки можна не використовувати:
fruits.forEach((fruit) => console.log(fruit));Метод forEach() може передати callback-функції три значення:
поточний елемент;
індекс поточного елемента;
весь масив.
const languages = ["JavaScript", "Python", "Java"];
languages.forEach((language, index, array) => {
console.log(language);
console.log(index);
console.log(array);
});Найчастіше використовують перші два параметри:
const products = ["Книга", "Ручка", "Зошит"];
products.forEach((product, index) => {
console.log(`${index + 1}. ${product}`);
});Результат:
1. Книга
2. Ручка
3. ЗошитЯкщо потрібен лише індекс, перший параметр можна назвати _:
const numbers = [10, 20, 30];
numbers.forEach((_, index) => {
console.log(`Індекс: ${index}`);
});Символ _ тут є звичайною назвою параметра, яка домовлено позначає: значення цього параметра не використовується.
for, for...of і forEachforВикористовуйте for, коли:
потрібен індекс;
необхідно змінювати лічильник особливим способом;
потрібно застосовувати break або continue;
важливий повний контроль над циклом.
const numbers = [5, 10, 15];
for (let index = 0; index < numbers.length; index++) {
console.log(numbers[index]);
}for...ofВикористовуйте for...of, коли:
потрібно просто перебрати значення;
індекс не потрібен;
треба зупинити перебір через break.
const numbers = [5, 10, 15];
for (const number of numbers) {
console.log(number);
}forEach()Використовуйте forEach(), коли:
потрібно виконати одну дію для кожного елемента;
callback-функція робить код зрозумілішим;
не потрібно достроково зупиняти перебір.
const numbers = [5, 10, 15];
numbers.forEach((number) => {
console.log(number);
});Уявімо список товарів із цінами. Потрібно вивести назву кожного товару та його ціну:
const products = [
{ name: "Клавіатура", price: 1200 },
{ name: "Мишка", price: 700 },
{ name: "Навушники", price: 1800 }
];
products.forEach((product, index) => {
console.log(`${index + 1}. ${product.name} — ${product.price} грн`);
});Результат:
1. Клавіатура — 1200 грн
2. Мишка — 700 грн
3. Навушники — 1800 грнУ callback-функції:
product — поточний об’єкт;
index — його індекс;
product.name — назва товару;
product.price — ціна товару.
Елементи масиву можна змінювати за їхнім індексом.
const numbers = [1, 2, 3, 4];
numbers.forEach((number, index, array) => {
array[index] = number * 2;
});
console.log(numbers); // [2, 4, 6, 8]Проте для створення нового масиву зазвичай краще використовувати метод map(). Метод forEach() переважно використовують для виконання дії, наприклад виведення даних або оновлення зовнішньої змінної.
return у callback-функціїУ callback-функції forEach() можна використати return, але він завершує лише поточний виклик callback-функції. Увесь перебір не зупиняється.
const numbers = [1, 2, 3, 4];
numbers.forEach((number) => {
if (number === 3) {
return;
}
console.log(number);
});Результат:
1
2
4Елемент 3 пропущено, але forEach() продовжив перебір.
Для повного завершення перебору використовуйте break у циклі for або for...of:
const numbers = [1, 2, 3, 4];
for (const number of numbers) {
if (number === 3) {
break;
}
console.log(number);
}Результат:
1
2const students = [
{ name: "Олена", score: 92 },
{ name: "Андрій", score: 78 },
{ name: "Марія", score: 85 }
];
let totalScore = 0;
students.forEach((student, index) => {
totalScore += student.score;
console.log(`${index + 1}. ${student.name}: ${student.score} балів`);
});
const averageScore = totalScore / students.length;
console.log(`Середній бал: ${averageScore}`);Результат:
1. Олена: 92 балів
2. Андрій: 78 балів
3. Марія: 85 балів
Середній бал: 85forПотрібно порівнювати індекс із length:
const numbers = [10, 20, 30];
for (let index = 0; index < numbers.length; index++) {
console.log(numbers[index]);
}Умова index <= numbers.length неправильна, оскільки останній доступний індекс дорівнює length - 1.
const numbers = [1, 2, 3];
// Такий цикл ніколи не завершиться
// for (let index = 0; index < numbers.length;) {
// console.log(numbers[index]);
// }Якщо не збільшувати index, умова залишатиметься істинною. Додавайте index++ у третю частину циклу або змінюйте індекс усередині тіла циклу.
for...of для отримання індексуconst fruits = ["яблуко", "банан"];
for (const fruit of fruits) {
console.log(fruit);
}Змінна fruit містить значення, а не індекс. Якщо потрібен індекс, використовуйте for, forEach() або інший відповідний спосіб.
forEach() поверне новий масивconst numbers = [1, 2, 3];
const result = numbers.forEach((number) => number * 2);
console.log(result); // undefinedforEach() не створює та не повертає новий масив. Для цього пізніше вивчіть метод map().
break у forEach()const numbers = [1, 2, 3];
// Синтаксична помилка:
// numbers.forEach((number) => {
// if (number === 2) {
// break;
// }
// });break можна використовувати в циклах for, for...of та інших циклах, але не всередині callback-функції forEach().
Створіть масив із п’яти чисел і виведіть усі числа за допомогою for.
Створіть масив імен та виведіть кожне ім’я за допомогою for...of.
За допомогою forEach() виведіть елементи масиву разом з їхніми індексами.
Обчисліть суму чисел масиву за допомогою forEach().
Виведіть лише непарні числа масиву, використовуючи for...of і continue.
Переберіть масив чисел і зупиніть цикл, щойно зустрінеться число 0.
Перебір масиву дозволяє послідовно опрацювати всі його елементи.
Цикл for надає найбільший контроль над індексом і умовою.
Цикл for...of перебирає значення масиву та зазвичай читається простіше.
Метод forEach() викликає callback-функцію для кожного елемента.
Callback-функція forEach() може отримати елемент, його індекс і весь масив.
break і continue працюють у циклах for та for...of, але не у forEach().
return у callback-функції forEach() пропускає лише поточну ітерацію, а не зупиняє весь перебір.