如何基于对象属性名对数组进行分组合并

发布时间 - 2025-12-27 00:00:00    点击率:

本文介绍如何使用 javascript 的 `reduce` 方法,按指定属性(如 category)对对象数组进行分组,并将同组对象的其他属性合并到一个对象中,适用于处理分类统计、数据聚合等场景。

在实际开发中,我们常需将扁平的对象数组按某个分类字段(如 category)聚合成结构更紧凑的分组数据。例如,原始数据中每个对象代表一项活动及其价格,但类别重复出现;目标是将同一类别的所有子项(如 'Hang with Friends'、Chill)合并到一个对象中,保留 category 字段并动态添加其余键值对。

✅ 正确实现方式(推荐)

使用 Array.prototype.reduce() 配合一个临时对象作为累加器(acc),以 category 值为键存储分组对象,并用 Object.assign() 合并当前项:

const data = [
  { category: 'Entertainment', 'Hang with Friends': 100 },
  { category: 'Entertainment', Chill: 30 },
  { category: 'Health', Yoga: 40 },
  { category: 'Health', Birthday: 200 }
];

const grouped = Object.values(
  data.reduce((acc, curr) => {
    // 若 acc 中尚无该 category 对应的对象,则初始化为空对象
    const target = (acc[curr.category] ??= {});
    // 将 curr 的所有自有属性合并到 target 中(包括 category)
    Object.assign(target, curr);
    return acc;
  }, {})
);

console.log(grouped);
// 输出:
// [
//   { category: 'Entertainment', 'Hang with Friends': 100, Chill: 30 },
//   { category: 'Health', Yoga: 40, Birthday: 200 }
// ]
? 关键点解析: acc[curr.category] ??= {} 是空值合并赋值,确保每个 category 对应唯一对象引用; Object.assign(target, curr) 安全覆盖或新增属性(若存在同名 key,后者值生效); 最终用 Object.values() 提取所有分组对象,丢弃中间的键名(即 category 字符串)。

? 适配结构化数据格式(推荐数据建模方式)

你后续提供的标准化格式更清晰、更易维护:

const structuredData = [
  { category: 'Entertainment', subCategory: 'Hang with Friends', price: 100 },
  { category: 'Entertainment', subCategory: 'Chill', price: 30 },
  { category: 'Health', subCategory: 'Yoga', price: 40 },
  { category: 'Health', subCategory: 'Birthday', price: 200 }
];

此时建议显式构造目标结构,避免直接合并 curr(防止 category 和 subCategory 冲突):

const groupedStructured = Object.values(
  structuredData.reduce((acc, { category, subCategory, price }) => {
    const group = (acc[category] ??= { category });
    group[subCategory] = price; // 动态添加子类目与价格映射
    return acc;
  }, {})
);

console.log(groupedStructured);
// 输出:
// [
//   { category: 'Entertainment', 'Hang with Friends': 100, Chill: 30 },
//   { category: 'Health', Yoga: 40, Birthday: 200 }
// ]

⚠️ 注意事项与最佳实践

  • 不要用 category 字符串直接索引数组:字符串不能作为数组下标参与数值运算,必须使用对象({})或 Map 作哈希表;
  • 避免副作用与可变状态:Object.assign() 修改的是已有对象,确保 target 是新引用或受控对象;
  • TypeScript 用户注意类型安全
    const grouped = Object.values(
      data.reduce>>((acc, curr) => {
        const target = (acc[curr.category] ??= {});
        Object.assign(target, curr);
        return acc;
      }, {})
    );
  • 性能考量:对于超大数据集(>10k 条),可考虑使用 Map 替代普通对象以规避原型链干扰,但日常场景 Object 已足够高效。

通过合理运用 reduce + 对象哈希 + Object.values(),你可以简洁、健壮地完成基于任意字符串字段的数组分组合并任务。


# javascript  # java  # go  # typescript  # 大数据  # ai  # 键值对  # red 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何处理JSON字段_Eloquent原生JSON字段类型操作教程  使用Dockerfile构建java web环境  Java遍历集合的三种方式  深圳网站制作培训,深圳哪些招聘网站比较好?  如何彻底删除建站之星生成的Banner?  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  如何快速生成可下载的建站源码工具?  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  ,交易猫的商品怎么发布到网站上去?  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  如何选择可靠的免备案建站服务器?  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  成都网站制作公司哪家好,四川省职工服务网是做什么用?  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站?  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  如何基于云服务器快速搭建个人网站?  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  php结合redis实现高并发下的抢购、秒杀功能的实例  邀请函制作网站有哪些,有没有做年会邀请函的网站啊?在线制作,模板很多的那种?  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  太平洋网站制作公司,网络用语太平洋是什么意思?  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  详解CentOS6.5 安装 MySQL5.1.71的方法  Laravel如何优化应用性能?(缓存和优化命令)  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设?  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  网页设计与网站制作内容,怎样注册网站?  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  原生JS获取元素集合的子元素宽度实例  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  简历没回改:利用AI润色让你的文字更专业  Android GridView 滑动条设置一直显示状态(推荐)  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  大学网站设计制作软件有哪些,如何将网站制作成自己app?  微信小程序 HTTPS报错整理常见问题及解决方案  如何用PHP快速搭建高效网站?分步指南  Laravel如何集成Inertia.js与Vue/React?(安装配置)  JavaScript如何实现倒计时_时间函数如何精确控制  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】