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() не повертає новий масив. Він просто дозволяє виконати певну дію для кожного елемента. Якщо вам потрібно створити новий масив зі зміненими елементами, розгляньте використання методу map().

автор: Bond правити

Нотатка

Метод forEach() є універсальним. Він передбачає, що значення this матиме властивість length і властивості із цілими числовими ключами.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

forEach(callbackFn)
forEach(callbackFn, thisArg)

Параметри

callbackFn

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

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

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

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

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

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

undefined

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	3	9.5	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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