在前端开发和数据处理中，我们经常会遇到需要对数组中的对象进行分组和结构重塑的需求。例如，给定一个包含多个对象的数组，我们可能需要根据其中某个属性（如name）将具有相同属性值的对象归类到一起，并将其余属性作为子项集合存储。
问题场景与目标
假设我们有一个原始数据数组，其结构如下：
const originalData = [
{ name: 3, q: 10, b: 1 },
{ name: 5, q: 6, b: 2 },
{ name: 5, q: 7, b: 1 }
];我们的目标是将其转换为以下结构：
[
{ name: 3, items: [{ q: 10, b: 1 }] },
{ name: 5, items: [{ q: 6, b: 2 }, { q: 7, b: 1 }] }
]可以看到，name值为5的两个原始对象被合并成了一个新对象，其items属性包含了这两个原始对象中除name之外的所有属性。
解决方案：使用 Array.prototype.reduce() 和 Object.values()
实现上述转换的核心在于Array.prototype.reduce()方法，它允许我们遍历数组并累积一个单一的结果。结合Object.values()，我们可以将中间生成的对象转换为最终所需的数组格式。
立即学习“Java免费学习笔记（深入）”；
1. 核心思路
- 累积中间对象： 使用reduce()方法遍历原始数组。在每次迭代中，我们将根据对象的name属性作为键，创建一个中间对象。如果该name键已存在，则将当前对象的剩余属性添加到对应的items数组中；如果不存在，则创建一个新的条目。
- 提取最终数组： reduce()操作结束后，我们将得到一个以name为键，以分组后的对象为值的普通JavaScript对象。为了获得最终所需的数组格式，我们需要使用Object.values()来提取这个中间对象的所有值。
2. 详细步骤与代码实现
const originalData = [
{ name: 3, q: 10, b: 1 },
{ name: 5, q: 6, b: 2 },
{ name: 5, q: 7, b: 1 },
];
// 步骤1: 使用 reduce 累积中间对象
const groupedObject = originalData.reduce((accumulator, currentObject) => {
// 解构赋值：提取 'name' 属性作为分组键，其余属性放入 'rest'
const { name, ...rest } = currentObject;
// 如果累加器中还没有这个 'name' 对应的分组，则初始化它
// 初始化结构为 { name: 当前name值, items: [] }
accumulator[name] = accumulator[name] || { name, items: [] };
// 将当前对象的剩余属性（rest）添加到对应分组的 'items' 数组中
accumulator[name].items.push(rest);
// 返回累加器，供下一次迭代使用
return accumulator;
}, {}); // 初始累加器为空对象 {}
// 步骤2: 使用 Object.values() 将中间对象转换为最终的数组
const reorganizedData = Object.values(groupedObject);
console.log(reorganizedData);
/*
输出结果:
[
{ name: 3, items: [ { q: 10, b: 1 } ] },
{ name: 5, items: [ { q: 6, b: 2 }, { q: 7: 1 } ] }
]
*/3. 代码解析
-
originalData.reduce((accumulator, currentObject) => { ... }, {}):
- reduce方法遍历originalData数组。
- accumulator：累加器，在每次迭代中都会持有上一次迭代返回的值。我们将其初始化为一个空对象{}，它将用于存储按name分组的中间结果。
- currentObject：当前正在处理的数组元素（即{ name: 3, q: 10, b: 1 }等）。
-
const { name, ...rest } = currentObject;:
- 这是ES6的对象解构赋值和剩余属性（Rest Properties）语法。
- 它从currentObject中提取name属性的值赋给name变量。
- 所有剩余的属性（即q和b）被收集到一个新的对象rest中。例如，对于{ name: 3, q: 10, b: 1 }，name将是3，rest将是{ q: 10, b: 1 }。
-
accumulator[name] = accumulator[name] || { name, items: [] };:
- 这行代码是实现分组的关键。
- accumulator[name]：尝试访问累加器中以当前name值作为键的属性。
- || (逻辑或运算符)：如果accumulator[name]为undefined（即第一次遇到这个name），则执行||右侧的表达式，创建一个新的分组对象{ name, items: [] }并赋值给accumulator[name]。
- 如果accumulator[name]已经存在（即之前已经处理过具有相同name的元素），则||左侧为真，不会执行右侧，accumulator[name]保持不变，确保我们不会覆盖已有的分组。
-
accumulator[name].items.push(rest);:
- 将当前对象的rest属性（不包含name）推入到对应name分组的items数组中。
-
return accumulator;:
- 每次迭代结束后，返回更新后的accumulator，它将作为下一次迭代的accumulator参数。
-
Object.values(groupedObject):
- reduce方法执行完毕后，groupedObject将是一个形如{ '3': { name: 3, items: [...] }, '5': { name: 5, items: [...] } }的对象。
- Object.values()方法会返回一个数组，其中包含了groupedObject所有可枚举属性的值。这些值正是我们所需的{ name: X, items: [...] }结构的对象。
注意事项与进阶
- 性能考量： reduce方法对于中小型数据集通常表现良好。对于非常庞大的数据集，其性能瓶颈可能在于JavaScript引擎的优化程度。在大多数Web应用场景中，这种方法是高效且可读性强的。
- 键的类型： name属性可以是数字、字符串等基本类型。如果name是对象或数组，需要考虑如何将其转换为可作为对象键的字符串形式（例如，使用JSON.stringify，但这会带来新的复杂性）。
- Lodash等库： 如果项目中已引入Lodash这样的工具库，可以使用_.groupBy方法实现更简洁的分组。然而，_.groupBy通常只进行简单的分组，其输出格式是{ 'key': [originalObject1, originalObject2] }。若要达到本教程中结构重塑的效果，仍需在此基础上进行额外的map操作。本教程提供的原生JS方案在不引入额外库的情况下，提供了更灵活的结构控制。
- 错误处理： 如果原始数据中某些对象缺少name属性，它们将被分组到undefined键下，即{ name: undefined, items: [...] }。根据实际需求，可能需要添加额外的检查或默认值处理。
总结
通过巧妙地结合Array.prototype.reduce()和ES6的解构赋值以及剩余属性语法，我们可以高效且清晰地实现JavaScript对象数组的按键分组和结构重塑。这种模式在数据处理和前端组件状态管理中非常实用，能够帮助开发者将扁平数据转换为更具业务含义的层次化结构，提升代码的可读性和可维护性。
