本文将介绍如何使用 JavaScript 将具有相同属性值的对象进行分组，并将结果转换为一个新的对象数组。我们将利用 Array.prototype.reduce() 和 Object.values() 方法，以简洁高效的方式实现对象重组，最终生成一个包含分组后数据的结构化数组。
使用 JavaScript 对对象数组按属性值分组
在实际开发中，我们经常需要根据对象数组中某个属性的值，将具有相同值的对象进行分组，以便于后续的数据处理和展示。本教程将提供一种简洁高效的 JavaScript 实现方案，无需依赖任何外部库。
实现原理
该方案的核心思想是利用 Array.prototype.reduce() 方法遍历原始对象数组，并使用一个对象作为累加器。累加器的键是用于分组的属性值，值是一个包含 name 和 items 属性的对象。name 属性存储分组的属性值，items 属性是一个数组，存储具有相同属性值的对象。
立即学习“Java免费学习笔记（深入）”；
代码示例
const data = [ { name: 3, q: 10, b: 1 }, { name: 5, q: 6, b: 2 }, { name: 5, q: 7, b: 1 },];const groupedData = Object.values( data.reduce((acc, obj) => { const { name, ...rest } = obj; acc[name] = acc[name] || { name, items: [] }; acc[name].items.push(rest); return acc; }, {}));console.log(groupedData);
代码解释
data: 这是原始的对象数组，包含需要分组的数据。data.reduce((acc, obj) => { … }, {}): 使用 reduce 方法遍历 data 数组。acc: 累加器，初始值为空对象 {}。它用于存储分组后的数据。obj: 当前遍历的对象。const { name, …rest } = obj;: 使用对象解构，提取对象的 name 属性，并将剩余属性存储在 rest 对象中。acc[name] = acc[name] || { name, items: [] };: 检查累加器 acc 中是否已存在以 name 为键的属性。如果不存在，则创建一个新的对象 { name, items: [] } 并赋值给 acc[name]。 items 属性初始化为空数组，用于存储具有相同 name 属性的对象。acc[name].items.push(rest);: 将 rest 对象（包含 q 和 b 属性）添加到 acc[name].items 数组中。return acc;: 返回累加器 acc，以便下一次迭代使用。Object.values(…): reduce 方法返回的是一个对象，其键是 name 属性的值，值是包含 name 和 items 属性的对象。Object.values() 方法用于提取该对象的所有值，并将它们转换为一个数组。
输出结果
运行上述代码，将得到以下输出结果：
[ { "name": 3, "items": [ { "q": 10, "b": 1 } ] }, { "name": 5, "items": [ { "q": 6, "b": 2 }, { "q": 7, "b": 1 } ] }]
总结
通过使用 Array.prototype.reduce() 和 Object.values() 方法，我们可以简洁高效地实现对象数组按属性值分组的功能。该方案具有良好的可读性和可维护性，适用于各种 JavaScript 项目。需要注意的是，在实际应用中，可以根据具体需求修改代码，例如更改用于分组的属性名称，或者对分组后的数据进行进一步处理。
以上就是按照相同值重组对象：JavaScript 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517902.html
微信扫一扫 
支付宝扫一扫 
