如何基于不同键比对两个对象数组并生成嵌套父子结构？

实现步骤 #

• 先用Lodash的_.groupBy把childArray按parentId分组，快速建立父ID到子元素的映射
• 遍历parentArray，给每个父对象追加Children属性，直接从分组结果中取对应子数组，没有匹配的就设为空数组

完整代码示例 #

import _ from 'lodash';

const parentArray = [
    { Id: 1, Name: 'A' },
    { Id: 2, Name: 'B' },
    { Id: 3, Name: 'C' },
    { Id: 4, Name: 'D' }
];

const childArray = [
    { Id: 2, parentId: 2, Name: 'a' },
    { Id: 3, parentId: 2, Name: 'b' },
    { Id: 4, parentId: 4, Name: 'c' },
    { Id: 5, parentId: 4, Name: 'd' }
];

// 按parentId分组子元素，形成 { '2': [...], '4': [...] } 的结构
const groupedChildren = _.groupBy(childArray, 'parentId');

// 映射父数组，添加Children属性
const newArray = _.map(parentArray, parent => ({
    ...parent,
    Children: groupedChildren[parent.Id] || []
}));

为什么你之前的方法没生效 #

_.intersectionWith是用来筛选两个数组的交集元素，_.isMatchWith是用来校验对象属性是否匹配，这两个方法的设计场景和你需要的关联分组生成嵌套结构完全不匹配，所以无法得到预期结果。

内容的提问来源于stack exchange，提问作者Werthis