JS使用sumBy计算对象数组总和方法

想知道JavaScript如何高效计算对象数组总和吗？本文为你揭秘！告别繁琐的循环和易错的reduce，`_.sumBy()`让你代码更简洁、意图更明确。本文详细介绍Lodash `_.sumBy()` 的用法，包括属性名字符串和函数迭代器的灵活应用，并深入解析其参数和特性。同时，如果不想引入外部库，我们还提供了手写 `customSumBy` 函数的方案，模拟 Lodash 功能，支持字符串属性名或函数提取值，并对非数字值进行安全处理。无论选择外部库还是手写实现，都能让你在面对对象数组求和时游刃有余。最终选择取决于项目对依赖、体积与开发效率的权衡。

使用Lodash的_.sumBy()可快速计算对象数组中某属性的总和，它接收集合和迭代器（属性名或函数）作为参数；2. 相比reduce，sumBy代码更简洁、意图更明确，且能避免空数组或非数字值导致的错误；3. 在无外部库时，可用reduce手写customSumBy函数，支持字符串属性名或函数提取值，并对非数字值视为0处理，确保健壮性；最终选择取决于项目对依赖、体积与开发效率的权衡。

在JavaScript中，如果你需要快速计算一个对象数组里某个特定属性的总和，sumBy是一个非常便捷的选择。它通常来源于Lodash这样的实用工具库，能让你的代码更简洁、意图更明确，避免了手动循环或使用reduce时可能带来的冗余代码。它就是为了这种特定聚合需求而生的。

解决方案

使用_.sumBy()（假设你已经引入了Lodash库），你可以轻松地完成这个任务。它接收两个参数：你想要处理的集合（通常是你的对象数组），以及一个用于指定如何获取数值的迭代器。这个迭代器可以是一个字符串（属性名），也可以是一个函数。

// 假设这是你的数据
const transactions = [
  { id: 1, amount: 100, type: 'income' },
  { id: 2, amount: 50, type: 'expense' },
  { id: 3, amount: 200, type: 'income' },
  { id: 4, amount: 75, type: 'expense' },
  { id: 5, amount: 120, type: 'income' }
];

// 引入 Lodash (例如通过 npm 或 CDN)
// import _ from 'lodash'; // 如果是ESM模块

// 1. 直接按属性名求和
const totalIncome = _.sumBy(transactions, 'amount');
console.log('所有交易的总金额:', totalIncome); // 输出: 545

// 2. 使用函数作为迭代器，计算特定类型的总和
const totalIncomeOnly = _.sumBy(transactions, (item) => {
  return item.type === 'income' ? item.amount : 0;
});
console.log('所有收入交易的总金额:', totalIncomeOnly); // 输出: 420

// 3. 处理更复杂的计算，比如计算净收入
const netBalance = _.sumBy(transactions, (item) => {
  return item.type === 'income' ? item.amount : -item.amount;
});
console.log('净余额:', netBalance); // 输出: 295 (100 + 200 + 120 - 50 - 75)

为什么我们需要像 sumBy 这样的工具函数？

你可能会想，JavaScript不是有reduce吗？为什么还要引入一个外部库来做这种看似简单的事情？嗯，这个问题问得很好，也确实是很多开发者在项目初期会纠结的点。

从我个人的经验来看，sumBy这类工具函数的价值，更多体现在代码的可读性、意图的明确性以及某种程度上的防错性。你看，每次用reduce去求和，你都得写：array.reduce((acc, item) => acc + item.property, 0)。这看起来不长，但如果你的业务逻辑稍微复杂一点，比如需要先过滤再求和，或者求和的属性是计算出来的，那这个reduce的回调函数就会变得越来越臃肿，甚至容易出错，比如忘记设置初始值0，或者在处理非数字类型时没有做好防御性编程。

而sumBy，它的名字本身就清晰地表达了“按某个属性求和”的意图。当你的同事或者未来的你回过头来看这段代码时，几乎不需要思考就能明白它在做什么。它把那些重复的、容易出错的模式封装起来，让开发者可以更专注于业务逻辑本身，而不是去纠结reduce的累加器和当前值。这在团队协作和长期项目维护中，是实实在在的效率提升。虽然它引入了一个依赖，但很多时候，这种依赖换来的是更健壮、更易读的代码。

Lodash _.sumBy 的具体用法和参数解析

我们来深入聊聊_.sumBy的参数和它的一些“小脾气”。它的完整签名通常是_.sumBy(collection, [iteratee=_.identity])。

• collection: 这个参数没啥好说的，就是你要操作的那个数组或集合。通常，它是一个对象数组，但理论上也可以是其他可迭代的集合。如果传入的不是一个有效的集合，或者集合是空的，sumBy会很友好地返回0，而不是抛出错误，这一点比手写reduce时需要自己处理空数组的情况要省心。

• iteratee: 这才是sumBy的灵魂所在。它决定了sumBy如何从集合中的每个元素里提取出那个需要被求和的数值。

  • 字符串（属性名）: 这是最常见也最简洁的用法。当你只想对对象数组中某个固定属性求和时，直接传入属性名的字符串即可。比如 _.sumBy(users, 'age')。Lodash会自动去访问每个user对象的age属性。
  • 函数: 当你的求和逻辑比较复杂，或者需要对一个计算后的值求和时，你可以传入一个函数。这个函数会为集合中的每个元素调用一次，它的返回值会被用于累加。例如，_.sumBy(orders, order => order.quantity * order.price) 就能计算总销售额。这里要注意的是，如果你的函数返回了null、undefined或其他非数字类型，sumBy会将其视为0进行累加，这在大多数情况下是符合预期的行为，但也意味着你需要确保你的迭代器函数返回的是你真正想要的数字。
  • 其他类型（不常用）: 理论上，iteratee还可以是数组（用于深层路径）或对象（用于属性匹配），但对于sumBy这种求和操作，使用字符串或函数是最常见且最符合逻辑的。

理解iteratee的灵活性是掌握sumBy的关键。它不仅能处理简单的属性求和，也能应对复杂的业务逻辑，比如条件求和、计算派生值等等。

在没有外部库的情况下，如何实现类似 sumBy 的功能？

当然，并不是所有项目都想引入一个像Lodash这样的大型库。有时候，手写一个也挺好，尤其是当你只需要这一两个功能的时候，或者你的项目对包体积有严格要求。

最接近sumBy原生实现的方式，无疑是使用Array.prototype.reduce()。

/**
 * 模拟 Lodash 的 _.sumBy 功能
 * @param {Array} collection 要遍历的数组
 * @param {string|Function} iteratee 用于获取数值的属性名或函数
 * @returns {number} 属性的总和
 */
function customSumBy(collection, iteratee) {
  // 处理空数组或非数组的情况，返回 0
  if (!Array.isArray(collection) || collection.length === 0) {
    return 0;
  }

  return collection.reduce((sum, item) => {
    let value;

    // 根据 iteratee 的类型获取值
    if (typeof iteratee === 'string') {
      value = item[iteratee];
    } else if (typeof iteratee === 'function') {
      value = iteratee(item);
    } else {
      // 如果 iteratee 既不是字符串也不是函数，我们假设要直接对 item 本身求和
      // 但对于对象数组，这通常不是你想要的，需要根据实际情况调整
      value = item;
    }

    // 确保值是数字，如果不是，则视为 0，避免 NaN
    const numericValue = typeof value === 'number' ? value : 0;
    return sum + numericValue;
  }, 0); // 初始值设置为 0，非常重要！
}

// 再次使用之前的 transactions 数据进行测试
const transactions = [
  { id: 1, amount: 100, type: 'income' },
  { id: 2, amount: 50, type: 'expense' },
  { id: 3, amount: 200, type: 'income' },
  { id: 4, amount: 75, type: 'expense' },
  { id: 5, amount: 120, type: 'income' }
];

const totalIncomeVanilla = customSumBy(transactions, 'amount');
console.log('Vanilla JS - 所有交易的总金额:', totalIncomeVanilla); // 输出: 545

const totalIncomeOnlyVanilla = customSumBy(transactions, (item) => {
  return item.type === 'income' ? item.amount : 0;
});
console.log('Vanilla JS - 所有收入交易的总金额:', totalIncomeOnlyVanilla); // 输出: 420

// 测试一些边缘情况
const emptyArray = [];
console.log('Vanilla JS - 空数组求和:', customSumBy(emptyArray, 'value')); // 输出: 0

const mixedData = [{ a: 10 }, { a: 'hello' }, { a: 20 }, { b: 30 }];
console.log('Vanilla JS - 混合数据求和 (a):', customSumBy(mixedData, 'a')); // 输出: 30 (hello 和 undefined 被视为 0)

这个customSumBy函数基本模拟了Lodash的行为，包括处理iteratee是字符串或函数的情况，以及对非数字值的健壮处理。选择使用外部库还是手写实现，通常是一个权衡：是引入一个成熟、经过大量测试、功能丰富的库，换取开发效率和代码健壮性；还是为了更小的包体积和更少的依赖，选择自己动手实现。这没有绝对的对错，完全取决于你的项目需求和团队偏好。但无论如何，理解sumBy背后的逻辑，能让你在遇到类似需求时，无论是用库还是自己写，都能胸有成竹。

本篇关于《JS使用sumBy计算对象数组总和方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！