JavaScript 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() для створення власних функцій агрегації даних на основі потреб вашої програми.

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

Порада

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

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

Нотатка

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

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

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

Синтаксис

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

автор: Bond

правити

initialValue

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

автор: Bond

правити

Повернення

value

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

автор: Bond

правити

Винятки

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

Переглядачі

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

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

Переглядач
	3	3	4	10.5	12

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

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

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

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

Приклади

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

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);

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

[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