js数据结构问题？

Question

const arr = [

{id: "5cbd75c2ba0ba2186bf8cd97", name: "首页", permission: "menu-home", description: ""},
{id: "5cbd75ceba0ba2186bf8cd98", name: "流程选择", permission: "menu-processSelect", description: ""},
{id: "5d47e09fba0ba22579325eda", name: "产品管理", permission: "menu-productManage", description: ""},
{id: "5d47e25dba0ba22579325edb", name: "流程管理", permission: "menu-processManage", description: "流程管理一级菜单"},
{id: "5d47e3eaba0ba22579325edc", name: "流程管理—风控管理", permission: "menu-processManage_riskControl", description: ""},
{id: "5d47e45fba0ba22579325edd", name: "流程管理—流程分配", permission: "menu-processManage_processAssign", description: ""},
{id: "5d47e47bba0ba22579325ede", name: "流程管理—任务池", permission: "menu-processManage_taskPool", description: ""},
{id: "5d47e49fba0ba22579325edf", name: "职责分配", permission: "menu-dutyAssign", description: ""},
{id: "5d47e4f8ba0ba22579325ee0", name: "审批管理", permission: "menu-approvalManage", description: ""},
{id: "5d47e571ba0ba22579325ee1", name: "审批管理—初审", permission: "menu-approvalManage_firstAudit", description: ""},
{id: "5d47e617ba0ba22579325ee2", name: "审批管理—初审—待处理", permission: "menu-approvalManage_firstAudit_pending", description: ""},
{id: "5d47fedeba0ba22579325ee9", name: "审批管理—初审—已处理", permission: "menu-approvalManage_firstAudit_processed", description: ""},
{id: "5d47ff18ba0ba22579325eea", name: "审批管理—初审—已挂起", permission: "menu-approvalManage_firstAudit_hangup", description: ""},
{id: "5d47ff49ba0ba22579325eeb", name: "审批管理—终审—已挂起", permission: "menu-approvalManage_lastAudit_hangup", description: ""},
{id: "5d47ff69ba0ba22579325eec", name: "审批管理—终审—待处理", permission: "menu-approvalManage_lastAudit_pending", description: ""},
{id: "5d47ff93ba0ba22579325eed", name: "审批管理—终审—已处理", permission: "menu-approvalManage_lastAudit_processed", description: ""},
{id: "5d48011bba0ba22579325eee", name: "审批管理—终审", permission: "menu-approvalManage_lastAudit", description: ""}

]
// 根据permission字段中隐含的父子关系，将这个json，转化成treeJson。
用了一个很笨的方法写的，感觉很不优雅。求大佬们优秀的解答

Answer 1

let map={};
let result=[];
arr.forEach(v=>{
    map[v.permission]={data:{...v,children:[]},parent:v.permission.replace(/[\-\_][a-z]+$/i,"")}
});
Object.values(map).forEach(v=>{
    if(v.parent==="menu"){
        result.push(v.data)
    }else{
        map[v.parent].data.children.push(v.data);
    }
});

Answer 2

没看懂你的父子关系

Answer 3

为什么不叫你们后台改数据结构

Answer 4

是指代码行数?

const convert = source => {
  const map = {};

  source.forEach(item => {
    item.parent = item.permission
      .split('_')
      .slice(0, -1)
      .join('_');
    map[item.permission] = item;
  });

  source.forEach(current => {
    const parent = current.parent;
    if (parent && map[parent]) {
      map[parent].children = map[parent].children || [];
      map[parent].children.push(current);
    }
  });

  return Object.keys(map)
    .map(key => (map[key].parent ? null : map[key]))
    .filter(Boolean);
};

Answer 5

说一下自己的思路
a. 全遍历数组，解析permission字段，根据"_"分组，数组长度即为菜单层级，将相同层级的菜单信息归类，组数倒数第二个元素单独定义个熟悉标志出来（菜单的上级标志），没有的话就是顶级菜单；
此次遍历后，不仅菜单的层级区分了，而且每个菜单都知道自己父级了；
b. 从一级菜单开始遍历，逐层向下遍历

提前归类思路能清楚些