如何基于对象属性名对数组进行分组合并
发布时间 - 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格式订阅内容【教程】


代普通对象以规避原型链干扰,但日常场景 Object 已足够高效。