基于parentId关联的双对象数组构建分类-按钮层级结构

需求概述 #

你有两个关联数组：

• 分类数组：每个项包含id等核心字段
• 按钮数据数组：每个项的parentId与分类的id一一对应

需要将两者整合为带children字段的层级结构，让每个分类下挂载对应的按钮数据，用于分类标题搭配按钮组的展示场景。

输入示例 #

// 分类数组
const categories = [
  { id: 1, name: "系统设置" },
  { id: 2, name: "用户管理" }
];

// 按钮数据数组
const buttons = [
  { id: 101, parentId: 1, label: "修改配置", action: "editConfig" },
  { id: 102, parentId: 1, label: "重置系统", action: "resetSystem" },
  { id: 201, parentId: 2, label: "添加用户", action: "addUser" },
  { id: 202, parentId: 2, label: "删除用户", action: "deleteUser" }
];

期望输出 #

[
  {
    id: 1,
    name: "系统设置",
    children: [
      { id: 101, parentId: 1, label: "修改配置", action: "editConfig" },
      { id: 102, parentId: 1, label: "重置系统", action: "resetSystem" }
    ]
  },
  {
    id: 2,
    name: "用户管理",
    children: [
      { id: 201, parentId: 2, label: "添加用户", action: "addUser" },
      { id: 202, parentId: 2, label: "删除用户", action: "deleteUser" }
    ]
  }
]

实现方案 #

先对按钮数据按parentId分组，再遍历分类数组匹配对应按钮，这种方式能有效降低时间复杂度：

function buildCategoryButtonTree(categories, buttons) {
  // 将按钮按parentId分组，避免重复遍历匹配
  const buttonGroup = buttons.reduce((group, button) => {
    const pid = button.parentId;
    if (!group[pid]) {
      group[pid] = [];
    }
    group[pid].push(button);
    return group;
  }, {});

  // 为每个分类添加对应按钮作为children
  return categories.map(category => ({
    ...category,
    children: buttonGroup[category.id] || []
  }));
}

// 调用示例
const result = buildCategoryButtonTree(categories, buttons);
console.log(result);

逻辑说明 #

1. 按钮分组：用reduce方法将按钮数组转换为以parentId为键、对应按钮数组为值的对象，后续匹配分类时可直接通过id获取对应按钮，时间复杂度从O(n*m)优化为O(n+m)。
2. 生成层级结构：遍历分类数组，通过扩展运算符保留原分类的所有字段，再添加children字段，值为分组后对应的按钮数组；若分类无对应按钮，则设为空数组兼容边界场景。

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