JS根据pid转为树形数据结构

初始数据

//pid为父节点的标识，根据pid转换成树形结构
const MENU = [
    { pid: -1, id: 0, path: "/", name: "生产执行" },
    { pid: 0, id: 1, path: "/orderCreation", name: "订单创建" },
    { pid: 0, id: 2, path: "/carTransfer", name: "叉车转移" },
    { pid: 0, id: 3, path: "/putDish", name: "装炉摆盘" },
    { pid: 0, id: 4, path: "/materialsDirection", name: "料件去向" },
    { pid: 0, id: 5, path: "/grindingTime", name: "打磨计时" },
    { pid: 0, id: 6, path: "/time", name: "时间轴" },
    { pid: 0, id: 7, path: "/tableTemperature", name: "温度文件" },
    { pid: 0, id: 8, path: "/drag", name: "拖拽" },
    { pid: 0, id: 9, path: "/siteSelected", name: "生产报工" },
]

目标结构

//父节点的  id  为子节点的  pid
const MENU = [
  { 
    pid: -1,
    id: 0, 
    path: "/", 
    name: "生产执行",
    children:[    
      { pid: 0, id: 1, path: "/orderCreation", name: "订单创建" },
      { pid: 0, id: 2, path: "/carTransfer", name: "叉车转移" },
      { pid: 0, id: 3, path: "/putDish", name: "装炉摆盘" },
      { pid: 0, id: 4, path: "/materialsDirection", name: "料件去向" },
      { pid: 0, id: 5, path: "/grindingTime", name: "打磨计时" },
      { pid: 0, id: 6, path: "/time", name: "时间轴" },
      { pid: 0, id: 7, path: "/tableTemperature", name: "温度文件" },
      { pid: 0, id: 8, path: "/drag", name: "拖拽" },
      { pid: 0, id: 9, path: "/siteSelected", name: "生产报工" },]},
]

方法一

//递归法
 const filter_menu = (menu, pid) => {
    const arr = []
    menu.forEach(ele => {
        if (ele.pid === pid) {
             ele.children = filter_menu(menu, ele.id)
             if (!ele.children.length) {
                delete ele.children
             }
             arr.push(ele)
         }
     });
     return arr
 }
}

方法二

//借助Array.map()
	const filter_menu = (menu) => {
        const arr = []
        const map = {}
        menu.forEach(item => {
            map[item.id] = item
        })
        menu.forEach(item => {
            const parent = map[item.pid]
            if(parent) {
                (parent.children || (parent.children = [])).push(item)
            } else {
                arr.push(item)
            }
        });
        return arr
  }