J*aScript/ReactJS中实现数组对象分组求和的SQL式聚合操作

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript/ReactJS中实现数组对象分组求和的SQL式聚合操作

2025-10-10

浏览次数：次

返回列表

JavaScript/ReactJS中实现数组对象分组求和的SQL式聚合操作

本文详细介绍了如何在J*aScript和ReactJS环境中，对数组对象进行类似SQL SUM和GROUP BY的聚合操作。通过迭代和中间对象存储的方式，演示了如何高效地根据指定属性（如ProjectType）对数组中的数值属性（如Amount和Hours）进行分组求和，最终生成结构化的聚合结果，避免了重复过滤和求和的繁琐步骤。

在现代前端应用开发中，尤其是在reactjs等框架中处理数据时，我们经常会遇到需要对数组中的对象进行分组和聚合计算的需求。这类似于关系型数据库中sql的sum和group by操作，即根据一个或多个键对数据进行分组，然后对每个组内的特定数值字段进行求和。

考虑以下一个包含项目信息的数组：

const frames = [
  {
    ProjectName: "Blue",
    EmployeeGroup: false,
    Amount: 50,
    Hours: 15,
    ProjectType: "Romeo",
  },
  {
    ProjectName: "Red",
    EmployeeGroup: false,
    Amount: 20,
    Hours: 5,
    ProjectType: "Lima",
  },
  {
    ProjectName: "Green",
    EmployeeGroup: true,
    Amount: 40,
    Hours: 10,
    ProjectType: "Lima",
  }
];

我们的目标是根据ProjectType对Amount和Hours进行求和，最终得到如下结构的数据：

[
  {
    ProjectType: "Lima",
    TotalAmount: 60,
    TotalHours: 15,
  },
  {
    ProjectType: "Romeo",
    TotalAmount: 50,
    TotalHours: 15,
  }
]

直接使用array.filter和array.reduce组合虽然可以实现对单一ProjectType的求和，但如果需要对所有ProjectType进行聚合，这种方法会导致多次遍历和重复逻辑，效率较低且代码冗余。

实现分组求和的策略

为了高效地实现类似SQL GROUP BY和SUM的功能，我们可以采用一种常见的J*aScript模式：利用一个中间对象作为累加器，在一次遍历中完成分组和求和。

迷你天猫商城

迷你天猫商城是一个基于Spring Boot的综合性B2C电商平台，需求设计主要参考天猫商城的购物流程：用户从注册开始，到完成登录，浏览商品，加入购物车，进行下单，确认收货，评价等一系列操作。作为迷你天猫商城的核心组成部分之一，天猫数据管理后台包含商品管理，订单管理，类别管理，用户管理和交易额统计等模块，实现了对整个商城的一站式管理和维护。所有页面均兼容IE10及以上现代浏览器。部署方式1、项目

0 查看详情迷你天猫商城

核心实现步骤

初始化一个空对象作为累加器：这个对象将用于存储按ProjectType分组后的聚合数据。ProjectType将作为这个对象的键。
遍历原始数组：对frames数组中的每个元素进行迭代。
检查并初始化分组项：在每次迭代中，检查当前元素的ProjectType是否已作为键存在于累加器对象中。
- 如果不存在，则为该ProjectType创建一个新的聚合对象，并初始化TotalAmount和TotalHours为0。
- 如果已存在，则直接使用现有聚合对象。
累加数值：将当前元素的Amount和Hours累加到对应ProjectType的聚合对象中的TotalAmount和TotalHours。
提取最终结果：遍历完成后，累加器对象包含了所有分组的聚合数据。使用Object.values()方法将这个对象的值（即每个ProjectType的聚合结果）转换为一个数组，从而得到最终的期望输出。

示例代码

const frames = [
  { ProjectName: "Blue", EmployeeGroup: false, Amount: 50, Hours: 15, ProjectType: "Romeo" },
  { ProjectName: "Red", EmployeeGroup: false, Amount: 20, Hours: 5, ProjectType: "Lima" },
  { ProjectName: "Green", EmployeeGroup: true, Amount: 40, Hours: 10, ProjectType: "Lima" }
];

const items = {}; // 初始化一个空对象作为中间累加器

// 使用 forEach 遍历原始数组
frames.forEach( ({ ProjectType, Amount, Hours }) => {
  // 检查当前 ProjectType 是否已存在于累加器中
  if (!items[ProjectType]) {
    // 如果不存在，则为该 ProjectType 初始化一个新的聚合对象
    items[ProjectType] = { ProjectType, TotalAmount: 0, TotalHours: 0 };
  }
  // 累加 Amount 和 Hours
  items[ProjectType].TotalAmount += Amount;
  items[ProjectType].TotalHours += Hours;
});

// 使用 Object.values() 将累加器对象转换为最终的数组结果
const output = Object.values(items);

console.log(output);
/*
输出结果:
[
  { ProjectType: 'Lima', TotalAmount: 60, TotalHours: 15 },
  { ProjectType: 'Romeo', TotalAmount: 50, TotalHours: 15 }
]
*/

代码解析

const items = {};: items是一个普通J*aScript对象，它将以ProjectType的值作为键，存储每个项目类型的聚合数据。
frames.forEach( ({ ProjectType, Amount, Hours }) => { ... });: 我们使用forEach方法遍历frames数组。这里使用了ES6的对象解构，直接从当前frame对象中提取了ProjectType、Amount和Hours这三个属性，使代码更简洁易读。
if (!items[ProjectType]) { ... }: 这是分组逻辑的关键。它检查items对象中是否已经存在以当前ProjectType为键的属性。如果不存在（即这是我们第一次遇到这个ProjectType），就创建一个新的对象，并将其ProjectType、TotalAmount和TotalHours初始化。
items[ProjectType].TotalAmount += Amount; 和 items[ProjectType].TotalHours += Hours;: 无论ProjectType是首次出现还是已经存在，我们都将当前Amount和Hours累加到对应ProjectType的TotalAmount和TotalHours上。
const output = Object.values(items);: forEach循环结束后，items对象看起来会是这样：
```
{
  "Lima": { ProjectType: "Lima", TotalAmount: 60, TotalHours: 15 },
  "Romeo": { ProjectType: "Romeo", TotalAmount: 50, TotalHours: 15 }
}
```
Object.values()方法用于返回一个给定对象自身的所有可枚举属性值的数组，顺序与for...in循环给出的顺序一致。这样，我们就得到了期望的数组格式结果。