本文介绍了如何使用 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 项目。
