哇卡卢卡 2021-09-02 09:40 采纳率: 66.7%
浏览 106
已结题

用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' }
        ]
    }
]
  • 写回答

2条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-09-02 10:17
    关注

    不知道是不是只有两层，多的话自己加个判断嵌套层数，而且你的父级和子级在同一个数据集里，那么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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 9月10日
  • 已采纳回答 9月2日
  • 创建了问题 9月2日

悬赏问题

  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？
  • ¥15 加热介质是液体，换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）