js 如何使用sumBy计算对象数组的属性总和-js教程-PHP中文网

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

js 如何使用sumBy计算对象数组的属性总和

在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

登录后复制

的回调函数就会变得越来越臃肿，甚至容易出错，比如忘记设置初始值

登录后复制

，或者在处理非数字类型时没有做好防御性编程。

而

sumBy

登录后复制

，它的名字本身就清晰地表达了“按某个属性求和”的意图。当你的同事或者未来的你回过头来看这段代码时，几乎不需要思考就能明白它在做什么。它把那些重复的、容易出错的模式封装起来，让开发者可以更专注于业务逻辑本身，而不是去纠结

reduce

登录后复制

的累加器和当前值。这在团队协作和长期项目维护中，是实实在在的效率提升。虽然它引入了一个依赖，但很多时候，这种依赖换来的是更健壮、更易读的代码。

Lodash

_.sumBy

登录后复制

的具体用法和参数解析

我们来深入聊聊

_.sumBy

登录后复制

的参数和它的一些“小脾气”。它的完整签名通常是

_.sumBy(collection, [iteratee=_.identity])

登录后复制

。

Zend Framework 2.4.3 完整版本

Zend框架2是一个开源框架,使用PHP 5.3 +开发web应用程序和服务。Zend框架2使用100%面向对象代码和利用大多数PHP 5.3的新特性,即名称空间、延迟静态绑定,lambda函数和闭包。 Zend框架2的组成结构是独一无二的;每个组件被设计与其他部件数的依赖关系。 ZF2遵循SOLID面向对象的设计原则。这样的松耦合结构可以让开发人员使用他们想要的任何部件。我们称之为“松耦合”

344

查看详情

```
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)

登录后复制

这个