JS метод Array.forEach()

Опис

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

Функція callbackFn активується лише для тих індексів масиву, що мають призначені значення. Отже, пусті слоти в розріджених масивах будуть проігноровані.

Що стосується forEach(), він не модифікує масив, на якому застосовується. Однак функція callbackFn може це робити. Слід звертати увагу на такі моменти:

• callbackFn не буде працювати з елементами, доданими після початку виконання forEach().
• Зміни, внесені до вже опрацьованих індексів, не викликатимуть повторного виклику callbackFn для них.
• Якщо певний елемент масиву, який ще не був опрацьований, змінюється за допомогою callbackFn, його стан на момент опрацьовування буде передано в callbackFn. Елементи, що були видалені, опрацьовуватися не будуть.

Приклад:

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => {
  console.log(fruit);
});

В цьому прикладі ми ітеруємо по масиву fruits та виводимо кожний його елемент на консоль за допомогою методу forEach().

Немає способу зупинити або прервати цикл forEach() окрім виняткового стану. Якщо ви шукаєте таку можливість, розгляньте використання циклів for, for...of чи for...in. Методи масиву every(), some(), find() та findIndex() також надають можливість припинення ітерації.

Зверніть увагу: forEach() працює лише з синхронними функціями. Цей метод не чекає на виконання обіцянок (promises). Тому будьте обережні, коли використовуєте обіцянки або асинхронні функції як callback для forEach.

Синтаксис

forEach(callbackFn)
forEach(callbackFn, thisArg)

Параметри

*callbackFn

Функція, яка виконується для кожного елемента масиву. Значення, яке вона повертає, не використовується.

Функція callbackFn викликається з наступними аргументами:

• element: поточний елемент, який обробляється у масиві;

• index: індекс поточного елемента, який обробляється у масиві;

• array: масив, на якому було викликано метод find().

thisArg

Значення, яке використовується як this під час виконання функції callbackFn.

Return

undefined

Метод не повертає жодного значення.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5

const arraySparse = [1, 3, /* пусто */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

// Перетворення циклу for на forEach

const items = ["item1", "item2", "item3"];
const copyItems = [];

// Початковий варіант
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// Перетворений варіант
items.forEach((item) => {
  copyItems.push(item);
});

// Зміна масиву під час ітерації

const words = ["one", "two", "three", "four"];
words.forEach((word) => {
  console.log(word);
  if (word === "two") {
    words.shift(); //'one' буде видалено з масиву
  }
}); // one // two // four

console.log(words); // ['two', 'three', 'four']

// Виклик forEach() на об'єктах, які не є масивами

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ігнорується forEach(), оскільки length дорівнює 3
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4