JavaScript数组对象分组求和：高效模拟SQL GROUP BY-js教程-PHP中文网

JavaScript数组对象分组求和：高效模拟SQL GROUP BY

聖光之護

发布： 2025-10-11 10:12:33

原创

656人浏览过

javascript数组对象分组求和：高效模拟sql group by

本教程将指导您如何在JavaScript和ReactJS环境中，高效地对数组对象执行类似SQL中SUM和GROUP BY的数据聚合操作。通过迭代数组并利用中间对象进行动态分组与累加，最终将原始数据转换为按指定键汇总的结构化结果，从而实现复杂的数据统计需求。

在现代前端开发中，尤其是在ReactJS等框架构建的组件中，我们经常需要处理来自后端或本地存储的复杂数据结构。其中一个常见需求是，对一个对象数组进行分组并计算每个组的总和，这与关系型数据库中SQL的GROUP BY和SUM操作非常相似。例如，我们可能需要根据某个属性（如ProjectType）将数据分组，然后计算每个组内其他数值型属性（如Amount和Hours）的总和。

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

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对这些数据进行分组，并计算每个ProjectType下Amount和Hours的总和，最终得到如下结构：

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

登录后复制

传统方法及其局限性

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

初学者可能会尝试结合filter和reduce方法来解决。例如，要计算"Lima"项目的总金额，可以这样做：

const filterAndSumAmount = (array, projectType) => {
  const filteredItems = array.filter(item => item.ProjectType === projectType);
  const totalAmount = filteredItems.reduce((accumulator, currentVal) => accumulator + currentVal.Amount, 0);
  return totalAmount;
};

console.log(filterAndSumAmount(frames, "Lima")); // 输出: 60

登录后复制

这种方法虽然能得到单个分组的某个总和，但它效率不高，因为它需要对每个分组和每个求和字段重复过滤和求和操作。如果我们需要计算多个分组的多个总和，这将导致多次遍历原始数组，代码也会变得冗余且难以维护。

高效的分组求和解决方案

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

101

查看详情

为了高效地实现类似SQL的GROUP BY和SUM操作，我们可以采用一种单次遍历数组并使用一个中间对象来累积结果的方法。这种方法的核心思想是利用对象的键值对来动态地存储每个分组的聚合数据。

实现步骤：

初始化中间对象： 创建一个空对象，用于存储按ProjectType分组的聚合数据。
遍历原始数组： 使用forEach或for...of循环遍历frames数组中的每一个对象。
动态分组与累加：
- 对于数组中的每一个项目，提取其ProjectType作为分组键。
- 检查中间对象中是否已经存在以该ProjectType为键的条目。
- 如果不存在，则为该ProjectType创建一个新的条目，并初始化TotalAmount和TotalHours为0。
- 如果已存在或刚创建，将当前项目的Amount和Hours累加到对应ProjectType的TotalAmount和TotalHours中。
转换最终结果： 遍历结束后，中间对象将包含所有分组的聚合数据。使用Object.values()方法将这个对象转换为一个数组，其中每个元素就是我们期望的最终结果对象。

示例代码：

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 aggregateByProjectType = (data) => {
  const aggregatedItems = {}; // 步骤1: 初始化中间对象

  data.forEach(({ ProjectType, Amount, Hours }) => { // 步骤2: 遍历原始数组并使用对象解构
    // 步骤3: 动态分组与累加
    if (!aggregatedItems[ProjectType]) {
      // 如果该ProjectType是第一次出现，则初始化其聚合数据
      aggregatedItems[ProjectType] = {
        ProjectType: ProjectType,
        TotalAmount: 0,
        TotalHours: 0
      };
    }
    // 累加当前项目的Amount和Hours到对应的分组
    aggregatedItems[ProjectType].TotalAmount += Amount;
    aggregatedItems[ProjectType].TotalHours += Hours;
  });

  // 步骤4: 转换最终结果为数组
  const output = Object.values(aggregatedItems);
  return output;
};

const result = aggregateByProjectType(frames);
console.log(result);
/*
输出:
[
  { ProjectType: 'Romeo', TotalAmount: 50, TotalHours: 15 },
  { ProjectType: 'Lima', TotalAmount: 60, TotalHours: 15 }
]
*/

登录后复制

代码解析：

aggregatedItems = {}: 这个空对象是我们的“累加器”。它的键将是ProjectType的值（例如 "Lima", "Romeo"），值将是包含ProjectType、TotalAmount和TotalHours的对象。
data.forEach(({ ProjectType, Amount, Hours }) => { ... }): 我们使用forEach方法遍历frames数组。({ ProjectType, Amount, Hours })是ES6的对象解构语法，它允许我们直接从当前迭代的对象中提取所需的属性，使代码更简洁。
if (!aggregatedItems[ProjectType]): 这是一个关键的检查。它判断aggregatedItems对象中是否已经存在以当前ProjectType为键的条目。如果不存在，说明这是我们第一次遇到这个ProjectType，需要为其创建一个新的聚合对象并初始化TotalAmount和TotalHours为0。
aggregatedItems[ProjectType].TotalAmount += Amount;: 无论ProjectType是新创建的还是已经存在的，我们都将其Amount和Hours累加到对应的TotalAmount和TotalHours中。
Object.values(aggregatedItems): 最后，Object.values()方法将aggregatedItems对象的所有可枚举属性值（即我们聚合后的项目对象）作为一个数组返回，这正是我们期望的最终输出格式。

注意事项与总结：