使用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
sumBy
这样的工具函数？
你可能会想，JavaScript不是有
reduce
吗？为什么还要引入一个外部库来做这种看似简单的事情？嗯，这个问题问得很好，也确实是很多开发者在项目初期会纠结的点。
从我个人的经验来看，
sumBy
这类工具函数的价值，更多体现在代码的可读性、意图的明确性以及某种程度上的防错性。你看，每次用
reduce
去求和，你都得写：
array.reduce((acc, item) => acc + item.property, 0)
。这看起来不长，但如果你的业务逻辑稍微复杂一点，比如需要先过滤再求和，或者求和的属性是计算出来的，那这个
reduce
的回调函数就会变得越来越臃肿，甚至容易出错，比如忘记设置初始值
0
，或者在处理非数字类型时没有做好防御性编程。
而
sumBy
，它的名字本身就清晰地表达了“按某个属性求和”的意图。当你的同事或者未来的你回过头来看这段代码时，几乎不需要思考就能明白它在做什么。它把那些重复的、容易出错的模式封装起来，让开发者可以更专注于业务逻辑本身，而不是去纠结
reduce
的累加器和当前值。这在团队协作和长期项目维护中，是实实在在的效率提升。虽然它引入了一个依赖，但很多时候，这种依赖换来的是更健壮、更易读的代码。
Lodash
_.sumBy
_.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
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); // 输出: 545const 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')); // 输出: 0const 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计算对象数组的属性总和的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516950.html
微信扫一扫 
支付宝扫一扫 
