如何按menuNo合并两个菜单数组生成带子元素的父子层级菜单

实现思路 #

• 先将子菜单数组（数组2）按parentMenu字段分组，生成哈希映射，键为父菜单的menuNo，值为对应子菜单的menuName数组，减少后续遍历查找的开销
• 遍历父菜单数组（数组1），为每个父菜单匹配对应子菜单列表
• 可根据需求过滤掉没有子菜单的父项（符合示例中去掉menuNo为1003的父菜单的要求）

完整实现代码 #

// 原数组1：父菜单列表
const parentMenus = [
  {
    "menuNo": "1001",
    "menuName": "All Forms",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1003",
    "menuName": "All Forms 2",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1006",
    "menuName": "All Forms 3",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": null,
    "iconName": null
  }
]

// 原数组2：子菜单列表
const childMenus = [
  {
    "menuNo": "1002",
    "menuName": "Child 1",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1001",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1012",
    "menuName": "Child 2",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1001",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1014",
    "menuName": "Child 1",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1006",
    "childMenu": null,
    "iconName": null
  },
  {
    "menuNo": "1019",
    "menuName": "Child 2",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "1006",
    "childMenu": null,
    "iconName": null
  }
]

// 生成子菜单分组映射
const childMenuMap = childMenus.reduce((map, item) => {
  const parentNo = item.parentMenu
  if (!map[parentNo]) map[parentNo] = []
  map[parentNo].push(item.menuName)
  return map
}, {})

// 合并生成带层级的菜单结构
const mergedMenus = parentMenus.map(parent => {
  return {
    ...parent,
    childMenu: childMenuMap[parent.menuNo] || []
  }
// 过滤掉没有子菜单的父项，删除这行就会保留menuNo为1003的父菜单
}).filter(item => item.childMenu.length > 0)

console.log(JSON.stringify(mergedMenus, null, 2))

输出结果（修正了示例中错误的JSON语法，childMenu为标准数组格式） #

[
  {
    "menuNo": "1001",
    "menuName": "All Forms",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": [
      "Child 1",
      "Child 2"
    ],
    "iconName": null
  },
  {
    "menuNo": "1006",
    "menuName": "All Forms 3",
    "groupNo": null,
    "groupName": null,
    "menuStatus": null,
    "groupStatus": null,
    "parentMenu": "0",
    "childMenu": [
      "Child 1",
      "Child 2"
    ],
    "iconName": null
  }
]

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