按照相同值重组对象：JavaScript 教程

本文将介绍如何使用 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);

代码解释

1. data: 这是原始的对象数组，包含需要分组的数据。
2. 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，以便下一次迭代使用。
3. 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 项目。需要注意的是，在实际应用中，可以根据具体需求修改代码，例如更改用于分组的属性名称，或者对分组后的数据进行进一步处理。