根据相同值重组对象：JavaScript 实现指南

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

代码解释

1. data 数组: 这是包含需要分组的对象的原始数组。

2. data.reduce((acc, obj) => { … }, {}): reduce 方法遍历 data 数组，并累积结果到一个对象 acc。 初始值是一个空对象 {}。

3. const { name, …rest } = obj;: 对于数组中的每个对象 obj，使用对象解构来提取 name 属性，并将剩余的属性（q 和 b）放入 rest 对象中。

4. acc[name] = acc[name] || { name, items: [] };: 这行代码检查累积对象 acc 中是否已存在以 name 为键的属性。

   • 如果不存在（acc[name] 是 undefined），则创建一个新的对象 { name, items: [] }，并将其赋值给 acc[name]。 这个新对象包含 name 属性和 items 数组（初始为空）。
   • 如果已存在，则保持 acc[name] 不变。 这确保了对于每个唯一的 name 值，我们只创建一个对应的对象。

5. acc[name].items.push(rest);: 将包含剩余属性的 rest 对象添加到 acc[name] 对象的 items 数组中。

6. return acc;: 返回累积对象 acc，以便下一次迭代使用。

7. 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 项目。