本文介绍了如何使用 JavaScript 将对象数组按照指定的键值进行分组，生成一个新的数组，其中每个元素包含一个键值和所有具有该键值的对象组成的数组。我们将使用 Array.prototype.reduce() 和 Object.values() 方法来实现此功能，并提供详细的代码示例和解释。
分组对象数组的 JavaScript 实现
在实际开发中，我们经常需要根据对象的某个属性值对对象数组进行分组。例如，我们有一个包含多个对象的数组，每个对象都有一个 name 属性，我们希望将具有相同 name 值的对象放在一起。
以下是一种使用 JavaScript 实现此功能的有效方法：
立即学习“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。 初始值是一个空对象 {}。
const { name, …rest } = obj;: 对于数组中的每个对象 obj，使用对象解构来提取 name 属性，并将剩余的属性（q 和 b）放入 rest 对象中。
acc[name] = acc[name] || { name, items: [] };: 这行代码检查累积对象 acc 中是否已存在以 name 为键的属性。
如果不存在（acc[name] 是 undefined），则创建一个新的对象 { name, items: [] }，并将其赋值给 acc[name]。 这个新对象包含 name 属性和 items 数组（初始为空）。如果已存在，则保持 acc[name] 不变。 这确保了对于每个唯一的 name 值，我们只创建一个对应的对象。
acc[name].items.push(rest);: 将包含剩余属性的 rest 对象添加到 acc[name] 对象的 items 数组中。
return acc;: 返回累积对象 acc，以便下一次迭代使用。
Object.values(…): reduce 方法返回的对象是一个键值对的集合，其中键是 name 值，值是包含 name 和 items 属性的对象。 Object.values() 方法提取该对象的所有值（即包含 name 和 items 属性的对象），并将它们放入一个数组中。
输出结果
上述代码将输出以下结果：
[ { "name": 3, "items": [ { "q": 10, "b": 1 } ] }, { "name": 5, "items": [ { "q": 6, "b": 2 }, { "q": 7, "b": 1 } ] }]
注意事项
此方法假设 name 属性的值是唯一的，可以用作对象的键。如果需要根据多个属性进行分组，可以修改 reduce 方法中的逻辑，构建更复杂的键。此方法不修改原始数组 data。
总结
通过使用 Array.prototype.reduce() 和 Object.values() 方法，我们可以轻松地根据指定的键值对对象数组进行分组。这种方法简洁高效，易于理解和维护，适用于各种 JavaScript 项目。
以上就是根据相同值重组对象：JavaScript 实现指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517900.html
微信扫一扫 
支付宝扫一扫 
