Сумма свойств массива в JavaScript: универсальная функция

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

Наиболее эффективным способом суммирования значений свойства в массиве является использование функции Array.prototype.reduce():

const sum = array.reduce((total, obj) => total + obj.property, 0);

Продвинутое использование reduce(): суммируем на уровне профессионалов

1. Не только числа: учитывание различных типов данных

Свойства могут содержать не только числа, но и строки. Для избегания их ошибочного сложения приводим к числу с помощью Number:

const total = array.reduce((accumulator, obj) => accumulator + Number(obj.property), 0);
// Таким образом можно избежать получения "1035" вместо 45, если в массиве были 10 и "35"!

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

2. Совершенствование навыков: использование деструктуризации в reduce()

Применение деструктуризации внутри функции reduce() делает код более понятным:

const sumByProp = (arr, prop) => arr.reduce((total, { [prop]: value }) => total + Number(value), 0);
// Действительно, деструктуризация творит чудеса!

3. Внедрение суммирования на практике: фильтрация массива перед подсчётом

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

const validItems = array.filter(item => item.property !== undefined);
const total = validItems.reduce((total, obj) => total + Number(obj.property), 0);
// Избавляемся от нежелательных `NaN`!

4. Сложение нескольких свойств: комбинирование reduce()

Суммирование нескольких свойств одновременно выполняется с применением reduce():

const sumProps = (array, props) => array.reduce((totals, item) => {
  props.forEach(prop => {
    totals[prop] = (totals[prop] || 0) + Number(item[prop]);
  });
  return totals;
}, {});
// В качестве бонуса имеем визуализированное представление результата!

5. ООП-подход: классы – вне конкуренции

Вынос логики суммирования в класс – это и красиво, и согенно эстетике ООП:

class Summer {
  constructor(array) {
    this.array = array; // Конструктор класса принимает массив для суммирования
  }

  sumByProp(prop) {
    return this.array.reduce((total, obj) => total + Number(obj[prop]), 0); // И мы без страха готовы к зимним холодам!
  }
}

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

Проиллюстрируем примером корзины с фруктами и подсчитаем их количество:

Корзина с фруктами: [{🍎, qty: 2}, {🍌, qty: 5}, {🍇, qty: 3}]

Определим общее количество фруктов:

const totalFruits = fruitBasket.reduce((sum, fruit) => sum + fruit.qty, 0);

Результат вычисления:

🍎🍎 + 🍌🍌🍌🍌🍌 + 🍇🍇🍇 = 🧮 Всего: 10

Это наглядно демонстрирует продуктивность метода .reduce()!

Обслуживаемые и аккуратные решения для суммирования

1. Универсализация в действии: переиспользование кода

Создание универсальной функции улучшает эффективность кода:

function sumObjectsByKey(array, key) {
  return array.reduce((accumulator, current) => {
    const keyValue = Number(current[key]) || 0;
    return accumulator + keyValue;
  }, 0);
  // Мы не можем пропустить значение свойства при его отсутствии – вместо этого просто подставляется 0
}

2. Сила ES6: код становится проще и современнее

Используем возможности ES6 для лаконичности и ясности кода:

const sumBy = (array, key) => array.reduce((total, { [key]: value }) => total + (value || 0), 0);

class Summer {
  constructor(...properties) {
    this.properties = properties;
  }

  calculate(array) {
    return this.properties.map(prop => sumBy(array, prop));
  }
}
// ES6 делает нас могущественнее!

3. Простота и порядок: классы идут на подмогу

Организовывая функции в классы, делаем код более систематизированным и понятным:

class PropertySummer {
  static sumByProperty(array, property) {
    return array.reduce((sum, item) => sum + Number(item[property]), 0);
  }
}
// PropertySummer: полная ясность при обработке одного элемента за разом

4. Сохраняем целостность: не меняем нативные прототипы

Чтобы избежать конфликтов, рекомендуется не расширять нативные прототипы, такие как Array.prototype:

// Зафиксируйте: расширение нативных прототипов – не самая хорошая идея. Лучше прибегать к собственным функциям и классам.

Особые случаи, подводные камни и рекомендации по предотвращению ошибок

1. Разреженные массивы: заполняем проблелы

Инициализируйте значения, чтобы избегать проблем с разреженными массивами. Ведь .reduce() не учитывает пропущенные элементы:

// Подсказка: будьте готовы к встрече с разреженными массивами

2. Обработка больших массивов: следим за производительностью

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

// Чтобы предотвратить задержки, для больших массивов рекомендуется использовать альтернативные методы и структуры данных

3. Неизменность данных: золотое правило работы с массивами

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

// Важный принцип: избегайте побочных эффектов в функциях

4. Готовимся к пустоте: инициализация значения для .reduce()

Если .reduce() вызывается на пустом массиве без указания начального значения, это вызовет TypeError:

// Для предотвращения TypeError задайте начальное значение для .reduce()

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

1. Array.prototype.reduce() – JavaScript | MDN — Детальное руководство по использованию метода reduce().
2. javascript – How to call reduce on an array of objects to sum their properties? – Stack Overflow — Практический опыт от программистов-энтузиастов сообщества JavaScript.
3. JavaScript Array reduce() Method – W3Schools — Простые примеры и пояснения по применению reduce().
4. Методы массива – Современное учебное пособие по JavaScript — Про методы массивов reduce и reduceRight.
5. Reduce (Сочинение программного обеспечения) – Статья на Medium — Анализ reduce() в контексте композиции программного обеспечения.
6. Руководство по методу Reduce в Javascript – freeCodeCamp — Глубокий обзор использования reduce для суммирования данных в массивах.
7. Понимание всемогущего Reducer | CSS-Tricks — Глубокое погружение в концепцию редьюсеров в JavaScript.