Array.reduce() в JavaScript — згорнути масив в одне значення

Опис

правити

Загальний опис

правити

Порада

При використанні методу 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	9

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

Переглядач
	4.4	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);

<header>
  <h2 class="title">Обчислення суми елементів масиву</h2>
  <p class="description">Цей приклад демонструє використання методу reduce() для обчислення суми елементів масиву з використанням початкового значення.</p>
</header>
<main>
  <pre>[1, 2, 3, 4]</pre>
  <div id="output"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

pre {
  color: #ff0000;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

const array1 = [1, 2, 3, 4];

const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue);


document.getElementById('output').innerHTML = `Сума елементів: ${sumWithInitial}`;
//# sourceURL=pen.js

const cart = [
  { name: 'Клавіатура', price: 1200 },
  { name: 'Миша', price: 450 },
];

// як треба: початкове значення передано
console.log(cart.reduce((sum, item) => sum + item.price, 0)); // 1650

// без нього порожній масив валить весь скрипт
try {
  [].reduce((sum, item) => sum + item.price);
} catch (e) {
  console.error(e.name + ': ' + e.message);
}
console.log([].reduce((sum, item) => sum + item.price, 0)); // 0

// колбек із фігурними дужками, але без return
console.log(cart.reduce((sum, item) => { sum + item.price; }, 0)); // undefined

// початкове значення задає тип результату
console.log([1, 2, 3].reduce((a, b) => a + b, ''));  // "123", а не 6
console.log([1, 2, 3].reduce((a, b) => a + b, 0));   // 6

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

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

console.log(sum); // → 95 (85 із масиву + 10 початкового значення)

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

console.log(sum); // 6