css.in.ua
Підтримати

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().
Нотатка:

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

Синтаксис

forEach(callbackFn)
forEach(callbackFn, thisArg)

Параметри

*callbackFn

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

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

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

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

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

thisArg

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

Return

undefined

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

Переглядачі

Переглядач

1

1.5

3

9.5

12
Переглядач

37

18

4

1
Переглядач

0.10.0

1.0

Приклади


Приклад використовує метод forEach() для масиву array1. Він перебирає кожен елемент масиву та виводить його у консоль. Крім того, результат роботи методу forEach() виводиться на сторінку.

Використання forEach() на розріджених масивах.

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().

// Перетворення циклу 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() на об'єктах, які не є масивами. Метод forEach() читає властивість length об'єкта this і потім отримує доступ до кожної властивості з ключем, що є не від'ємним цілим числом меншим за length.

// Виклик 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

Спільнота

Зв'язок