用ES6的方法,有什么完美的代码方案吗


// 使用father_id和id去筛选,找到父级并添加进去

// 原始数据
let routeList = [
    { father_id: 0, id: 1, name: '一级菜单-1' },
    { father_id: 0, id: 2, name: '一级菜单-2' },
    { father_id: 0, id: 3, name: '一级菜单-3' },
    { father_id: 1, id: 1, name: '菜单1-1' },
    { father_id: 1, id: 2, name: '菜单1-2' },
    { father_id: 1, id: 3, name: '菜单1-3' },
    { father_id: 2, id: 4, name: '菜单2-1' },
    { father_id: 2, id: 5, name: '菜单2-2' },
    { father_id: 2, id: 6, name: '菜单2-3' },
    { father_id: 3, id: 7, name: '菜单3-1' },
    { father_id: 3, id: 8, name: '菜单3-2' },
    { father_id: 3, id: 9, name: '菜单3-3' }
]

// 期望结果数据
let resultList = [
    {
        father_id: 0,
        id: 1,
        name: '一级菜单-1',
        children: [
            { father_id: 1, id: 1, name: '菜单1-1' },
            { father_id: 1, id: 2, name: '菜单1-2' },
            { father_id: 1, id: 3, name: '菜单1-3' }
        ]
    },
    {
        father_id: 0,
        id: 2,
        name: '一级菜单-2',
        children: [
            { father_id: 2, id: 4, name: '菜单2-1' },
            { father_id: 2, id: 5, name: '菜单2-2' },
            { father_id: 2, id: 6, name: '菜单2-3' }
        ]
    },
    {
        father_id: 0,
        id: 3,
        name: '一级菜单-3',
        children: [
            { father_id: 3, id: 7, name: '菜单3-1' },
            { father_id: 3, id: 8, name: '菜单3-2' },
            { father_id: 3, id: 9, name: '菜单3-3' }
        ]
    }
]

不知道是不是只有两层,多的话自己加个判断嵌套层数,而且你的父级和子级在同一个数据集里,那么id也不应该重复,不可以同时存在两个1、2、3,多层级的话你这样影响数据处理,我被迫拆分两个数组,如果id不重复不用拆出来,明白我的意思不


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style></style>

  <body></body>

  <script>
    let routeList = [
      { father_id: 0, id: 1, name: "一级菜单-1" },
      { father_id: 0, id: 2, name: "一级菜单-2" },
      { father_id: 0, id: 3, name: "一级菜单-3" },
      { father_id: 1, id: 1, name: "菜单1-1" },
      { father_id: 1, id: 2, name: "菜单1-2" },
      { father_id: 1, id: 3, name: "菜单1-3" },
      { father_id: 2, id: 4, name: "菜单2-1" },
      { father_id: 2, id: 5, name: "菜单2-2" },
      { father_id: 2, id: 6, name: "菜单2-3" },
      { father_id: 3, id: 7, name: "菜单3-1" },
      { father_id: 3, id: 8, name: "菜单3-2" },
      { father_id: 3, id: 9, name: "菜单3-3" },
    ];

    const fatherList = [];
    const childList = [];
    routeList.map((cur) => {
      const { father_id } = cur;
      father_id === 0 ? fatherList.push(cur) : childList.push(cur);
    });

    const resultList = fatherList.map((cur) => {
      const { id } = cur;
      const tempChildList = childList.filter((child) => child.father_id === id);
      cur["children"] = tempChildList;
      return cur;
    });

    console.log(resultList)
  </script>
</html>

img


let arr = routeList.filter(i => i.father_id === 0)
arr.forEach(i => {
   i.children = routeList.filter(j => j.father_id === i.id)
})
console.log(arr)