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

JS метод Array.reduce()

Опис

Метод reduce() використовується для обробки масиву та перетворення його елементів в єдине значення, використовуючи передану функцію callbackFn.

В основі роботи reduce() лежить так звана "функція-редуктор". Ця функція викликається для кожного елемента масиву по порядку, і результат її виконання аккумулюється для наступних викликів. Важливо зазначити, що callbackFn активується лише для тих індексів масиву, які мають встановлені значення, вона ігнорує "порожні" слоти.

Приклад використання:

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // Output: 10

У цьому прикладі ми сумуємо всі числа масиву за допомогою reduce(). Ітерації відбуваються наступним чином: 1+2+3+4=101+2+3+4=10, тому результатом виконання коду буде 10.

reduce(), на відміну від деяких інших методів, не приймає аргумент thisArg. Замість цього callbackFn завжди викликається з undefined як контекст this, який замінюється на globalThis, якщо callbackFn не виконується в строгому режимі.

reduce() є важливою частиною функціонального програмування, де зміна значень вважається небажаною. Тому, щоб накопичити всі значення в масиві, на кожній ітерації повертається нове значення аккумулятора. В JavaScript рекомендується використовувати spread оператор або інші методи копіювання, де це можливо, для створення нових масивів та об'єктів як аккумулятора. Якщо ви все-таки вирішите модифікувати аккумулятор, не забудьте повернути його з callbackFn, інакше наступна ітерація отримає undefined.

Зверніть увагу, що reduce() не модифікує масив, для якого було зроблено виклик, але callbackFn може це зробити. Однак важливо відзначити, що довжина масиву зафіксована перед першим викликом callbackFn. Таким чином:

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

Попередження: Модифікації, описані вище, можуть ускладнити розуміння коду, тому рекомендовано їх уникати, якщо вони не є необхідними для конкретної задачі.

Нотатка:

Крім функції аккумулятора, метод reduce() також приймає необов'язковий початкове значення аккумулятора. Це значення використовується як початкове значення аккумулятора перед першою ітерацією. Якщо початкове значення не вказано, перший елемент масиву використовується як початкове значення аккумулятора. У випадку порожнього масиву без початкового значення аккумулятора, метод reduce() поверне undefined.
Порада:

При використанні методу reduce() варто мати на увазі, що він може бути потужним інструментом для зведення масиву до одного значення, такого як обчислення суми, середнього значення або знаходження максимального/мінімального елемента. Ви можете використовувати метод reduce() для створення власних функцій агрегації даних на основі потреб вашої програми.
Порада:

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

Синтаксис

reduce(callbackFn)
reduce(callbackFn, initialValue)

Параметри

*callbackFn

Функція, яка має бути викликана для кожного елемента масиву. Результат її виконання стає значенням параметра accumulator для наступного виклику. В кінцевому підсумку, значення, що повертається з останнього виклику, стає кінцевим результатом, який повертає reduce().

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

  • accumulator: Значення, що отримано в результаті попереднього виклику callbackFn. При першому виклику - це initialValue, якщо вказано, в іншому випадку - значення array[0].
  • currentValue: Значення поточного елемента. При першому виклику - це значення array[0], якщо було вказано initialValue, в іншому випадку - значення array[1].
  • currentIndex: Позиція індексу currentValue в масиві. При першому виклику - 0, якщо було вказано initialValue, в іншому випадку - 1.
  • array: Масив, на якому було викликано reduce().
initialValue

Початкове значення для accumulator, коли здійснюється перший виклик зворотньої функції callbackFn. Якщо передбачено параметр initialValue, то зворотня функція розпочинає свою роботу з першого елемента масиву, вважаючи його поточним значенням.

Return

value

Результат, який виходить після того, як "редуктор" зворотної функції успішно опрацював весь масив.

Exception

TypeError: якщо масив не містить елементів, а початкове значення не надане.

Переглядачі

Переглядач

3

3

4

10.5

12
Переглядач

37

18

4

3.2
Переглядач

0.10.0

1.0

Приклади


Цей приклад демонструє використання методу reduce() для обчислення суми елементів масиву з використанням початкового значення. Результат виводиться на сторінці.

Як працює reduce() з початковим значенням. Тут ми зменшуємо масив, використовуючи той самий алгоритм, але з початковим значенням 10, переданим як другий аргумент у reduce().

[15, 16, 17, 18, 19].reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  10,
);

Сума значень в масиві об'єктів.

const objects = [{ x: 1 }, { x: 2 }, { x: 3 }];
const sum = objects.reduce(
  (accumulator, currentValue) => accumulator + currentValue.x,
  0
);

console.log(sum); // 6

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

console.log([1, 2, , 4].reduce((a, b) => a + b)); // 7
console.log([1, 2, undefined, 4].reduce((a, b) => a + b)); // NaN

Наведений код показує, що відбувається, коли ми викликаємо reduce() з масивом без початкового значення.

const array = [15, 16, 17, 18, 19];

function reducer(accumulator, currentValue, index) {
  const returns = accumulator + currentValue;
  console.log(
    `accumulator: ${accumulator}, currentValue: ${currentValue}, index: ${index}, returns: ${returns}`,
  );
  return returns;
}

array.reduce(reducer);

Спільнота

Зв'язок