JavaScript forEach Метод: Як Використовувати

Pofku · **Сьогодні** в 03:26 PM

Метод forEach у JavaScript є одним із найпопулярніших способів перебору елементів масиву. Він дозволяє виконувати певну функцію для кожного елемента масиву без необхідності використовувати класичний цикл for. У цій статті ми детально розглянемо, як працює forEach, надамо приклади коду та відповімо на поширені запитання.

Що таке forEach?
forEach — це вбудований метод масивів у JavaScript, який викликає задану функцію один раз для кожного елемента масиву в порядку їх індексів. Він не повертає нового масиву (на відміну від методів, таких як map), а просто виконує дію для кожного елемента.

Синтаксис:

Ко Select

array.forEach(function(element, index, array) {
  // код, який виконується для кожного елемента
});

element: Поточний елемент масиву.
index (необов'язковий): Індекс поточного елемента.
array (необов'язковий): Сам масив, який перебирається.

Як використовувати forEach?
Давайте розглянемо кілька прикладів, щоб зрозуміти, як працює forEach.

Приклад 1: Виведення елементів масиву

Ко Select

const fruits = ["яблуко", "банан", "апельсин"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

Вивід:

Ко Select

яблуко
банан
апельсин

У цьому прикладі ми просто виводимо кожен елемент масиву fruits у консоль.

Приклад 2: Використання індексу

Ко Select

const colors = ["червоний", "синій", "зелений"];

colors.forEach(function(color, index) {
  console.log(`${index + 1}. ${color}`);
});

Вивід:

Ко Select

1. червоний
2. синій
3. зелений

Тут ми додали індекс, щоб пронумерувати елементи.

Приклад 3: Модифікація зовнішнього об'єкта
forEach зручно використовувати для оновлення даних у зовнішніх структурах, наприклад, для підрахунку суми.

Ко Select

const numbers = [10, 20, 30, 40];
let sum = 0;

numbers.forEach(function(number) {
  sum += number;
});

console.log(`Сума: ${sum}`);

Вивід:

Ко Select

Сума: 100
Приклад 4: Використання стрілкових функцій
Для більш лаконічного коду можна використовувати стрілкові функції:

Ко Select

const animals = ["кіт", "собака", "папуга"];

animals.forEach(animal => console.log(animal.toUpperCase()));

Вивід:

Ко Select

КІТ
СОБАКА
ПАПУГА

Коли використовувати forEach?

Коли потрібно виконати дію для кожного елемента масиву.
Якщо не потрібно створювати новий масив (інакше краще використовувати map).
Для простих операцій, таких як вивід у консоль, оновлення DOM або підрахунок.

FAQ: Поширені запитання про forEach
Питання 1: Чи можна використовувати forEach для об'єктів?
Відповідь: Ні, forEach працює лише з масивами. Для перебору властивостей об'єкта використовуйте Object.keys(), Object.values() або for...in.

Питання 2: Як зупинити forEach?
Відповідь: Зупинити forEach неможливо. Якщо потрібна зупинка, використовуйте цикл for або методи, такі як some чи every.

Питання 3: Чи змінює forEach оригінальний масив?
Відповідь: Сам forEach не змінює масив, але функція, яку ви передаєте, може це зробити, якщо ви явно змінюєте елементи масиву.

Питання 4: Чи можна використовувати async/await з forEach?
Відповідь: forEach не чекає завершення асинхронних операцій. Для асинхронного перебору краще використовувати for...of або Promise.all з map.

Висновок
Метод forEach — це зручний і читабельний спосіб перебору елементів масиву в JavaScript. Він ідеально підходить для простих операцій, коли не потрібно повертати результат або переривати цикл. Завдяки підтримці стрілкових функцій і необов'язкових параметрів, таких як індекс, forEach є універсальним інструментом для багатьох завдань.

JavaScript forEach Метод: Як Використовувати

Pofku