如何实现带ParentKey的JavaScript对象嵌套分组？

需求说明 #

• 给定对象数组，每个对象必含Name、Key属性，部分对象含ParentKey属性
• 以无ParentKey的对象作为顶级分组，每个分组的groupName对应对象的Key，actionsArr中包含该对象本身
• 带有ParentKey的对象需嵌套到对应父对象的subActions数组中（ParentKey匹配父对象的Name属性）

初始输入 #

const arr = [
    { Name: 'Manage Leads', Key: 'Manage Leads' },
    { Name: 'Dashboard', Key: 'Dashboard' },
    { Name: 'Smart Views', Key: 'Smart Views' },
    { Name: 'Lead Details', Key: 'Lead Details' },
    { Name: 'Opportunity Details', Key: 'Opportunity Details' },
    { Name: 'Header', Key: 'Header' },
    { Name: 'Settings', Key: 'Settings' },
    { Name: 'Test 1', Key: 'Test1Key' },
    { Name: 'Test 1.1', Key: 'Test1.1Key', ParentKey: 'Test1' },
    { Name: 'Test 1.2', Key: 'Test1.2Key', ParentKey: 'Test1' },
    { Name: 'Test 1.1.1', Key: 'Test1.1.1Key', ParentKey: 'Test 1.1' },
    { Name: 'Test 1.1.2', Key: 'Test1.1.2Key', ParentKey: 'Test 1.1' },
    { Name: 'Test 1.2.1', Key: 'Test1.2.1Key', ParentKey: 'Test 1.2' },
];

解决方案代码 #

// 1. 构建Name到对象的映射，同时初始化subActions数组
const nameMap = new Map();
arr.forEach(item => {
    const obj = { ...item, subActions: [] };
    nameMap.set(item.Name, obj);
});

// 2. 将带有ParentKey的对象嵌套到对应父节点的subActions中
arr.forEach(item => {
    if (item.ParentKey) {
        const parent = nameMap.get(item.ParentKey);
        if (parent) {
            parent.subActions.push({ ...item, subActions: [] });
        }
    }
});

// 3. 收集顶级节点并格式化为期望结构
const result = arr
    .filter(item => !item.ParentKey)
    .map(topItem => ({
        groupName: topItem.Key,
        actionsArr: [nameMap.get(topItem.Name)]
    }));

console.log(result);

思路解释 #

1. 构建映射表：使用Map存储每个对象的Name与对象的对应关系，同时为每个对象初始化subActions数组，便于后续子节点的嵌套操作。
2. 嵌套子节点：遍历数组，对带有ParentKey的对象，通过映射表找到匹配ParentKey的父对象，将当前对象添加到父对象的subActions数组中。
3. 生成最终结构：筛选出所有无ParentKey的顶级对象，按照要求的格式组装结果数组，每个分组包含groupName和actionsArr。

原代码问题说明 #

你之前的代码中使用了未在输入对象中定义的GroupKey属性，且未处理子节点的嵌套逻辑。上述方案既完成了分组需求，也实现了多层嵌套的功能。

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