树形结构数据转换

最新推荐文章于 2023-07-05 22:06:51 发布

旧友前度丶

最新推荐文章于 2023-07-05 22:06:51 发布

阅读量330

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wangyangzxc123/article/details/127666334

版权

<!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>
<body>
</body>
</html>
<script>
    var data = [
        { id: 1, name: "办公管理", pid: 0 },
        { id: 2, name: "请假申请", pid: 1 },
        { id: 3, name: "出差申请", pid: 1 },
        { id: 4, name: "请假记录", pid: 2 },
        { id: 5, name: "系统设置", pid: 0 },
        { id: 6, name: "权限管理", pid: 5 },
        { id: 7, name: "用户角色", pid: 6 },
        { id: 8, name: "菜单设置", pid: 6 }
    ]
    // 如果将整个作为一个函数时 避免多次调用, 删除所有的 children
    // data.forEach(function (item) { 
    //     delete item.children
    // })

    // 1. 根据数据判断pid为0是最高父级,依次子级为pid等于id 所以要做对比
    // 2. 以原数组每一项的id作为新数组的key 索引得到第二套数据.但不影响
    let map = []
    data.forEach(function (item) {
        map[item.id] = item
    })
    // 3. 打印结果console.log(map === data), 值为false
    // 4. console.log(map === data)  ---  false
    // 5. 循环原数组中每一项, 如果pid等于id 则当前项为子级, 另一项为父级
    // 6. 新数组map对应的索引为1-8,等于原数组id,这样就可以做出判断.  新数组map[item.pid === key索引值],则这个值等于key索引与之对应的子级
    // 7. 这里理解起来有点绕, 意思就是在循环的时候,将每一项中的pid都作为map新数组的索引,及当循环的pid等于 1 时 { id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 }, 
    // 我们就得到了索引为1的map值 { id: 1, name: "办公管理", pid: 0 }
    let val = []
    data.forEach(function (item) {
        // 此时的map[item.pid] 满足索引条件从0开始, 但是map[]里面没有索引为0的数据,只有1-8
        // 接着判断.等到mpa[item.pid] 其中的item.pid === 1 也就是map[1]
        var parent = map[item.pid]
        if (parent) {
            parent.children = []
            parent.children.push(item)
        } 
        else {
            val.push(item)   
        }
    })
    console.log(val)
</script>