J*aScript中实现对象数组的SQL式分组与聚合_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

J*aScript中实现对象数组的SQL式分组与聚合

2025-10-10

浏览次数：次

返回列表

javascript中实现对象数组的sql式分组与聚合

本文将详细介绍如何在J*aScript中对对象数组进行分组和聚合操作，以实现类似于SQL SUM 和 GROUP BY 的功能。我们将通过一个具体的案例，演示如何根据 ProjectType 字段对数据进行分组，并计算每个组的 Amount 和 Hours 总和，最终生成结构化的结果，这对于在ReactJS等前端框架中处理数据尤为实用。

在前端开发，尤其是在使用ReactJS等框架时，我们经常需要处理来自API或本地的数据集合。这些数据通常以对象数组的形式存在，而我们面临的一个常见需求是对这些数据进行分组和聚合，例如按某个字段进行分组，并计算其他字段的总和、平均值或计数。这与关系型数据库中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 字段对这些项目进行分组，并计算每个 ProjectType 下的 Amount 总和 (TotalAmount) 和 Hours 总和 (TotalHours)，最终得到类似以下结构的结果：

[
  {
    ProjectType: "Lima",
    TotalAmount: 60, // 20 + 40
    TotalHours: 15,  // 5 + 10
  },
  {
    ProjectType: "Romeo",
    TotalAmount: 50,
    TotalHours: 15,
  }
]

初学者可能会尝试使用 array.filter() 结合 array.reduce() 来实现，但这通常会导致针对每个分组键进行多次过滤和规约操作，代码重复且效率不高。例如，要获取 "Lima" 项目类型的 Amount 总和，可能会写出如下代码：

const filterByProjectType = (array, projectType) => {
     const reducer = (arr) => {
          const reduced = arr.reduce(
               (accumulator, currentVal) => accumulator + currentVal.Amount, 0
          );
          return reduced;
     }
     const filtered = reducer(array.filter((item) => item.ProjectType.includes(projectType)));
     return filtered
}

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

这种方法虽然能得到正确结果，但如果需要获取所有 ProjectType 的聚合数据，就需要重复调用 filterByProjectType 并手动组合结果，显然不是最佳实践。

eSiteGroup站群管理系统1.0.4

eSiteGroup站群管理系统是基于eFramework低代码开发平台构建，是一款高度灵活、可扩展的智能化站群管理解决方案，全面支持SQL Server、SQLite、MySQL、Oracle等主流数据库，适配企业级高并发、轻量级本地化、云端分布式等多种部署场景。通过可视化建模与模块化设计，系统可实现多站点的快速搭建、跨平台协同管理及数据智能分析，满足政府、企业、教育机构等组织对多站点统一管控的

0 查看详情 eSiteGroup站群管理系统1.0.4

高效的分组与聚合方法

在J*aScript中，实现类似SQL GROUP BY 和 SUM 的高效方法是利用一个临时对象作为累加器，通过一次遍历来完成分组和聚合。

核心思路

初始化一个空对象：这个对象将用作一个哈希表（或字典），其键是分组依据的字段值（例如 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 items = {}; // 步骤1: 初始化一个空对象作为累加器

// 步骤2&3: 遍历原始数组并进行动态聚合
frames.forEach( ({ ProjectType, Amount, Hours }) => {
  // 如果当前 ProjectType 还没有对应的聚合对象，则初始化
  if (!items[ProjectType]) {
    items[ProjectType] = { ProjectType, TotalAmount: 0, TotalHours: 0 };
  }
  // 累加 Amount 和 Hours
  items[ProjectType].TotalAmount += Amount;
  items[ProjectType].TotalHours += Hours;
});

// 步骤4: 将聚合结果对象转换为数组
const output = Object.values(items);
console.log(output);

运行上述代码，将得到以下预期结果：

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

代码详解

const items = {};：我们创建了一个名为 items 的空对象。这个对象将临时存储按 ProjectType 分组后的数据。例如，items['Lima'] 将存储所有 ProjectType 为 "Lima" 的项目的聚合结果。
frames.forEach(({ ProjectType, Amount, Hours }) => { ... });：我们使用 forEach 方法遍历 frames 数组中的每个项目。这里使用了ES6的解构赋值，直接从每个项目对象中提取 ProjectType、Amount 和 Hours 属性，使代码更简洁。
if (!items[ProjectType]) { ... }：在处理每个项目时，我们首先检查 items 对象中是否已经存在以当前项目的 ProjectType 为键的属性。
- 如果 items[ProjectType] 不存在（即这是我们第一次遇到这个 ProjectType），我们就为它创建一个新的对象 { ProjectType, TotalAmount: 0, TotalHours: 0 }，并将其赋值给 items[ProjectType]。TotalAmount 和 TotalHours 初始化为0，作为该分组的起始累加值。
- 如果 items[ProjectType] 已经存在，说明我们之前已经处理过这个 ProjectType 的项目，直接跳过初始化步骤。
items[ProjectType].TotalAmount += Amount; 和 items[ProjectType].TotalHours += Hours;：无论 ProjectType 是首次出现还是已经存在，我们都将当前项目的 Amount 和 Hours 值分别累加到 items[ProjectType] 对象的 TotalAmount 和 TotalHours 属性中。
const output = Object.values(items);：当 forEach 循环完成后，items 对象将包含所有 ProjectType 的最终聚合数据。例如，items 可能看起来像这样：
```
{
  "Romeo": { ProjectType: "Romeo", TotalAmount: 50, TotalHours: 15 },
  "Lima": { ProjectType: "Lima", TotalAmount: 60, TotalHours: 15 }
}
```
Object.values() 方法用于提取一个对象所有可枚举属性的值，并将其作为一个数组返回。这正是我们所需的最终数据结构。

注意事项与最佳实践

单次遍历效率高：这种方法只需要对原始数组进行一次遍历，因此对于大型数据集来说，其性能通常优于多次 filter 和 reduce 的组合。
可扩展性强：如果需要聚合更多的字段（例如 TotalCount、AverageAmount 等），只需在 if (!items[ProjectType]) 块中初始化这些字段，并在累加步骤中更新它们即可。
可读性好：相较于复杂的 reduce 链式调用，使用 forEach 配合一个外部累加器对象的方式，通常更容易理解和维护。
Immutability（不变性）：此方法不会修改原始 frames 数组，而是生成一个新的聚合结果数组，符合函数式编程中保持数据不变性的原则。
适用于多种聚合场景：除了求和，这种模式也可以轻松扩展到计算平均值（需要同时累加总和和计数）、最大值、最小值等其他聚合操作。

总结

在J*aScript中，实现类似SQL SUM 和 GROUP BY 的功能，最有效且易于理解的方法是利用一个中间对象作为累加器，通过一次遍历原始数组来动态地构建分组和聚合结果。这种模式不仅性能优越，而且代码结构清晰，易于扩展和维护，是处理前端数据聚合任务的推荐实践。

以上就是J*aScript中实现对象数组的SQL式分组与聚合的详细内容，更多请关注其它相关文章！

# 只需 # seo要什么条件 # 郑州网站优化与推广 # 江门网站建设junke100 # 高端网站建设银行图片 # 连云港营销推广售后人员 # 商城网站建设的重点问题 # 老鹅营销号怎么做推广 # 餐饮营销信息推广 # 抖音矩阵关键词排名技术 # 济南谷歌seo加盟 # 自定义 # 不存在 # 所需 # react # 象中 # 转换为 # 数据结构 # 管理系统 # 遍历 # 累加器 # red # 前端开发 # 前端 # js # java # es6 # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：J*aScript动态创建Bootstrap元素：解决样式未生效的视觉假象

下一篇：修复CSS按钮点击时移动问题的教程

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们