JavaScript 按属性减少对象数组

在JavaScript中，我们有时需要对对象数组按属性进行统计或者求和，比如计算某一类商品的销售总额。本文将介绍如何使用JavaScript将对象数组按属性减少，并提供代码示例。

reduce() 方法

JavaScript数组对象的reduce()方法可以对数组中的每个元素进行一个累加操作，并可选择累加的属性。reduce()方法的语法如下：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

其中：

• total：必需，初始值或者上一次操作的返回值。
• currentValue：必需，当前元素的值。
• currentIndex：可选，当前元素的索引值。
• arr：可选，当前数组对象。
• initialValue：可选，初始值。

reduce()方法会遍历数组对象的所有元素，并执行一个回调函数，将回调函数的返回值累加到total中，最终返回total的值。

对象数组按属性减少

我们假设有一个对象数组，每个对象都有一个属性price表示商品的价格，我们需要按照商品种类对价格进行统计。假设数组如下所示：

let products = [
  {name: 'apple', price: 10},
  {name: 'orange', price: 20},
  {name: 'apple', price: 5},
  {name: 'banana', price: 15},
  {name: 'orange', price: 30}
];

现在我们需要将以上数据按照name属性进行减少，也就是统计每类商品的销售总额。

方式一：使用for循环

使用for循环遍历数组并统计销售总额，代码如下：

let result = {};
for (let i = 0; i < products.length; i++) {
  let name = products[i].name;
  let price = products[i].price;
  if (!result[name]) {
    result[name] = price;
  } else {
    result[name] += price;
  }
}

在上述代码中，我们定义了一个对象result，用于存储每种商品的销售总额。在循环中，我们首先获取当前元素的name和price属性，然后判断result对象中是否已经存在该商品。如果不存在，则将其添加到result对象中，价格为当前商品的价格。如果已经存在，则将当前商品价格累加到result对象中。

方式二：使用reduce()方法

我们可以使用reduce()方法来简化代码，代码如下：

let result = products.reduce((p, c) => (p[c.name] = (p[c.name] || 0) + c.price, p), {});

在上述代码中，我们首先定义了一个空对象{}作为reduce()方法的初始值。在回调函数中，我们先从当前元素（即c）中获取name和price属性，然后使用了一个简洁的语法，将name属性作为result对象的键，price累加到result对象中，最终返回result对象。

结论

本文介绍了如何使用JavaScript将对象数组按属性减少。通过使用reduce()方法，我们可以简单快捷地实现此功能，避免使用for循环造成代码冗长和出错的风险。在实际开发中，我们可以根据需要选择适合自己的方法来进行数据的处理。