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

在现代前端应用开发中，尤其是在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的功能，我们可以采用一种常见的JavaScript模式：利用一个中间对象作为累加器，在一次遍历中完成分组和求和。

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

0

查看详情

立即学习“Java免费学习笔记（深入）”；

核心实现步骤

1. 初始化一个空对象作为累加器：这个对象将用于存储按ProjectType分组后的聚合数据。ProjectType将作为这个对象的键。
2. 遍历原始数组：对frames数组中的每个元素进行迭代。
3. 检查并初始化分组项：在每次迭代中，检查当前元素的ProjectType是否已作为键存在于累加器对象中。
   • 如果不存在，则为该ProjectType创建一个新的聚合对象，并初始化TotalAmount和TotalHours为0。
   • 如果已存在，则直接使用现有聚合对象。
4. 累加数值：将当前元素的Amount和Hours累加到对应ProjectType的聚合对象中的TotalAmount和TotalHours。
5. 提取最终结果：遍历完成后，累加器对象包含了所有分组的聚合数据。使用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是一个普通JavaScript对象，它将以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循环给出的顺序一致。这样，我们就得到了期望的数组格式结果。

注意事项与总结

• 效率：这种方法只需要对原始数组进行一次遍历（单趟操作），相比于多次filter和reduce的组合，在处理大型数据集时效率更高。
• 可读性：代码逻辑清晰，易于理解，符合JavaScript开发者常用的模式。
• 灵活性：如果需要聚合更多字段，只需在初始化时添加相应字段，并在累加步骤中增加对应的求和操作即可。
• ReactJS环境：在React组件中，你可以在useEffect钩子中执行此类数据处理，或者在组件状态更新时调用此函数，以确保数据始终是最新的。

通过这种迭代加中间对象的策略，我们可以有效地在JavaScript中模拟SQL的GROUP BY和SUM操作，实现复杂的数据聚合需求，为前端应用的数据展示和分析提供强大的支持。

以上就是JavaScript/ReactJS中实现数组对象分组求和的SQL式聚合操作的详细内容，更多请关注php中文网其它相关文章！