Использование функции reduce для суммы свойств в массиве JS

Быстрый ответ

Для суммирования значений заданного свойства в массиве объектов лучше воспользоваться методом .reduce(), переопределив его начальное значение:

const array = [{ score: 10 }, { score: 20 }, { score: 30 }];

const totalScore = array.reduce((сумма, item) => сумма + item.score, 0);

console.log(totalScore); // Вывод: 60

Примечание: Убедитесь, что имя свойства (score) соответствует ключам ваших объектов.

Подготовка к применению reduce

Перед тем как применять .reduce(), важно задать начальное значение. Это предотвратит возникновение проблем с пустыми массивами и неопределёнными свойствами, исключая появление NaN. В контексте TypeScript начальное значение исключит ошибки вывода типов для аккумулятора.

Искусство деструктуризации

При работе с .reduce() можно применить деструктуризацию текущего объекта для упрощения доступа к его свойствам:

const totalScore = array.reduce((сумма, { score }) => сумма + score, 0);

Это значительно улучшает читаемость кода.

Краткость с применением стрелочных функций в ES6

Синтаксис стрелочных функций в ES6 позволяет составить более простые и понятные выражения для .reduce(), которые работают очень эффективно:

const totalScore = array.reduce((сумма, obj) => сумма + obj.score, 0);

Преимущества иммутабельности: начальные значения

Иммутабельность является краеугольным камнем функционального программирования. Отсутствие мутаций подразумевает нужность установки начального значения для .reduce().

Обработка сложных структур: вложенные массивы

Сложные структуры, такие как вложенные массивы, требуют простого представления перед использованием .reduce():

const arrayOfArrays = [[1, 2], [3, 4], [5, 6]];
const flatArray = arrayOfArrays.flat(); // Преобразуем в плоскую форму
const sum = flatArray.reduce((сумма, value) => сумма + value, 0); // Производим подсчёт суммы

Эффективность комбинации Map-Reduce

Если нужно сложить свойство, находящееся на большей глубине, или при необходимости трансформации данных перед редукцией, лучше применить комбинирование .map() и .reduce():

const totalScore = array
  .map(item => item.score * 2) // Удваиваем значения
  .reduce((сумма, score) => сумма + score, 0); // Завершаем подсчет суммы

Практические советы по примерам

Проверка наличия свойства

Перед суммированием убедитесь в наличии свойства, чтобы избежать ошибок:

const safeSum = array.reduce((сумма, obj) => 'score' in obj ? сумма + obj.score : сумма, 0); // Свойство score должно присутствовать!

Подробнее об этом расскажет наш спикер на видео

Очистка данных для предотвращения ошибок с типами

При работе с массивом, включающим различные типы данных, следует преобразовать их в однородный формат для правильного суммирования:

const mixedArray = [{ score: 10 }, { score: '20' }, { }];
const numericSum = mixedArray.reduce((сумма, obj) => {
  const score = parseInt(obj.score, 10);
  return Number.isNaN(score) ? сумма : сумма + score;
}, 0);

Улучшение производительности с помощью трансдьюсеров

Трансдьюсеры облегчают выполнение сложных трансформаций, объединяя их в одну операцию:

const doubleSumTransducer = array.reduce((сумма, obj) => сумма + (obj.score * 2), 0);

Визуализация

Представим команду тружеников (👷‍♂️👷👷‍♀️), каждый из которых имеет ведро с яблоками (🍎). Наша задача – собрать все яблоки в одну корзину.

В следующем коде демонстрируется, как они объединяют свой урожай:

totalApples = [🍎🍎🍎, 🍎🍎, 🍎🍎🍎🍎].reduce((общее количество, ведро) => общее количество + ведро.length, 0);

Получаем в итоге одну общую корзину:

Задача выполнена 🎉

Практическое применение reduce

Чем больше параметров, тем интереснее

Функция .reduce() принимает до четырех аргументов: аккумулятор, текущий элемент, индекс и сам массив, что предоставляет простор для более комплексных решений:

const detailedSum = array.reduce((сумма, obj, index, arr) => {
  // Здесь можно выполнить сложные вычисления
  return сумма + obj.score;
}, 0);

Reduce не ограничивается числами

.reduce() может преобразовать массив в любой тип данных — будь то строки, объекты или даже функции:

const concatenatedNames = userList.reduce((names, user) => names + user.name + ' ', ''); // Объединяем имена в длинную строку.

Адаптация к сложным структурам

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

function customFlatten(arr) {
  return arr.reduce((flat, toFlatten) => {
    return flat.concat(Array.isArray(toFlatten) ? customFlatten(toFlatten) : toFlatten);
  }, []);
}

Полезные материалы

1. Array.prototype.reduce() – JavaScript | MDN – официальная документация метода Array.prototype.reduce().
2. Как использовать reduce для суммирования свойств объектов в массиве? – Stack Overflow – практические примеры и обсуждение метода .reduce() с объектами.
3. Полное руководство по методу JavaScript Reduce | DigitalOcean – всеобъемлющее руководство по reduce.
4. Руководство по использованию метода Reduce в Javascript​ | freeCodeCamp – детальное изучение reduce.
5. Понятие трансдьюсера и его применение | CSS-Tricks – глубокий анализ reduce и его применений.