• 树形结构数据转换

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10. </body>
    11. </html>
    12. <script>
    13.     var data = [
    14.         { id: 1, name: "办公管理", pid: 0 },
    15.         { id: 2, name: "请假申请", pid: 1 },
    16.         { id: 3, name: "出差申请", pid: 1 },
    17.         { id: 4, name: "请假记录", pid: 2 },
    18.         { id: 5, name: "系统设置", pid: 0 },
    19.         { id: 6, name: "权限管理", pid: 5 },
    20.         { id: 7, name: "用户角色", pid: 6 },
    21.         { id: 8, name: "菜单设置", pid: 6 }
    22.     ]
    23.     // 如果将整个作为一个函数时 避免多次调用, 删除所有的 children
    24.     // data.forEach(function (item) { 
    25.     //     delete item.children
    26.     // })
    27.  
    28.     // 1. 根据数据判断pid为0是最高父级,依次子级为pid等于id 所以要做对比
    29.     // 2. 以原数组每一项的id作为新数组的key 索引得到第二套数据.但不影响
    30.     let map = []
    31.     data.forEach(function (item) {
    32.         map[item.id] = item
    33.     })
    34.     // 3. 打印结果console.log(map === data), 值为false
    35.     // 4. console.log(map === data)  ---  false
    36.     // 5. 循环原数组中每一项, 如果pid等于id 则当前项为子级, 另一项为父级
    37.     // 6. 新数组map对应的索引为1-8,等于原数组id,这样就可以做出判断.  新数组map[item.pid === key索引值],则这个值等于key索引与之对应的子级
    38.     // 7. 这里理解起来有点绕, 意思就是在循环的时候,将每一项中的pid都作为map新数组的索引,及当循环的pid等于 1 时 { id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 }, 
    39.     // 我们就得到了索引为1的map值 { id: 1, name: "办公管理", pid: 0 }
    40.     let val = []
    41.     data.forEach(function (item) {
    42.         // 此时的map[item.pid] 满足索引条件从0开始, 但是map[]里面没有索引为0的数据,只有1-8
    43.         // 接着判断.等到mpa[item.pid] 其中的item.pid === 1 也就是map[1]
    44.         var parent = map[item.pid]
    45.         if (parent) {
    46.             parent.children = []
    47.             parent.children.push(item)
    48.         } 
    49.         else {
    50.             val.push(item)   
    51.         }
    52.     })
    53.     console.log(val)
    54. </script>

  • 相关阅读:
    Java Double toHexString()方法具有什么功能呢？
    项目代驾（Delegate）：新式灵活的协作模式
    习题：循环结构（一）
    nginx--指令
    小学生护眼灯怎么选？性价比高的护眼台灯
    【Verilog实战】SPI协议底层硬件接口设计和功能验证（附源码）
    GB28181状态信息报送解读及Android端国标设备接入技术实现
    maven下载使用及环境变量配置步骤【非常详细】
    强大的协作工具 J2L3x，创造出高效敏捷的工作氛围
    ISP代理是什么？双ISP是什么意思？
  • 原文地址：https://blog.csdn.net/wangyangzxc123/article/details/127666334