如何将相同id和name的JS数组对象合并成新的数组对象？

可以通过使用reduce方法结合对象键值映射的方式，将相同id和name的JavaScript数组对象合并成新的数组对象。以下是具体实现步骤和代码说明：

实现思路

使用reduce遍历数组：通过reduce方法迭代原始数组，逐步构建一个中间对象，该对象的键由id和name组合而成，值为合并后的对象。
生成唯一键：将id和name拼接成字符串（如${id}-${name}），作为中间对象的键，确保相同id和name的对象映射到同一键下。
处理list属性：
若键不存在，初始化一个新对象，并将list属性转换为数组（若原list不是数组）。
若键已存在，将当前对象的list追加到已有对象的list数组中。
转换结果为数组：使用Object.values()将中间对象转换为数组，得到最终合并后的结果。

代码实现let arr = [ { id: 1, name: '小明', list: { id: 66 } }, { id: 1, name: '小红', list: { id: 44 } }, { id: 2, name: '小绿', list: { id: 55 } }, { id: 2, name: '小绿', list: { id: 33 } }, { id: 3, name: '小紫', list: { id: 11 } }, { id: 3, name: '小紫', list: { id: 22 } }];const result = Object.values(arr.reduce((acc, { id, name, list }) => { const key = `${id}-${name}`; // 生成唯一键 if (!acc[key]) { // 键不存在时初始化对象，确保list为数组 acc[key] = { id, name, list: Array.isArray(list) ? list : [list] }; } else { // 键存在时追加list到数组 acc[key].list.push(list); } return acc;}, {}));console.log(result);代码说明

reduce方法：遍历数组arr，累加器acc是一个对象，用于存储合并后的中间结果。
唯一键生成：通过${id}-${name}确保相同id和name的对象映射到同一键。
list处理逻辑：
首次遇到某键时，检查list是否为数组，若不是则转换为数组（如[list]）。
后续遇到相同键时，直接将list追加到已有数组中（acc[key].list.push(list)）。
Object.values()：将中间对象acc的值（即合并后的对象）转换为数组，得到最终结果。

输出结果

运行上述代码后，result的值为：

[ { id: 1, name: '小明', list: [{ id: 66 }] }, { id: 1, name: '小红', list: [{ id: 44 }] }, { id: 2, name: '小绿', list: [{ id: 55 }, { id: 33 }] }, { id: 3, name: '小紫', list: [{ id: 11 }, { id: 22 }] }]优势

高效性：通过一次遍历（reduce）完成合并，时间复杂度为O(n)。
可读性：逻辑清晰，避免复杂的嵌套或字符串操作（如JSON转换）。
健壮性：处理了list属性可能不是数组的情况，确保结果一致性。

此方法适用于需要按多个属性聚合数据的场景，可根据实际需求调整键的生成规则或合并逻辑。

您可能感兴趣问答

Collapsible

热门标签

热点问答