js生成二叉树

const data = [
            { id: 1, pId: 0, name: '系统管理' },
            { id: 2, pId: 0, name: '权限管理' },
            { id: 3, pId: 0, name: '设备管理' },
            { id: 4, pId: 2, name: '用户管理' },
            { id: 5, pId: 4, name: '用户列表' },
            { id: 6, pId: 4, name: '用户添加' },
            { id: 12, pId: 2, name: '角色管理' },
            { id: 13, pId: 12, name: '角色列表' },
            { id: 14, pId: 12, name: '角色添加' },
            { id: 20, pId: 1, name: '日志管理' },
            { id: 21, pId: 20, name: '日志列表' },
            { id: 24, pId: 20, name: '日志编辑' },
            { id: 28, pId: 1, name: '菜单管理' },
            { id: 29, pId: 28, name: '菜单列表' },
            { id: 30, pId: 28, name: '菜单添加' }
        ];
        const treeData = tree(data);

        console.log('data', data)
        console.log('treeData', treeData)

        /**
         * 生成二叉树
         * @param arr 原数据
         * @param pid 父级属性
         * @param firstId 父级的顶级值
         * return 二叉树数据
        */
        function tree(arr, pid = 'pId', firstId = 0) {
            // 拷贝原数据
            const arrData = JSON.parse(JSON.stringify(arr));
            // 生成结果
            const treeData = [];

            // 用于递归归位
            const fun = (data, obj) => {
                // 顶级
                if (obj[pid] == firstId) treeData.push(obj);
                // 非顶级
                else {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].id == obj[pid]) {
                            data[i].children.push(obj);
                            break;
                        } else {
                            fun(data[i].children, obj);
                        }
                    }
                }
            }

            // 先排序pid防止错乱,再遍历
            arrData.sort((a, b) => { return a[pid] - b[pid] })
            for (let i = 0; i < arrData.length; i++) {
                const d = {
                    ...arrData[i],
                    children: []
                }
                fun(treeData, d);
            }
            return treeData;
        }
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值