树形结构与平铺结构之间的转换

最新推荐文章于 2023-08-23 15:39:01 发布

臭宝520

最新推荐文章于 2023-08-23 15:39:01 发布

阅读量1k

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/xiao980522/article/details/120430572

版权

树形结构转为平铺结构

<!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>树形结构转平铺结构</title>
</head>

<body>
    <script>
        const tree = [{
            id: 1,
            name: '北京',
            children: [{
                id: 11,
                name: '朝阳',
                children: [{ id: 111, name: '朝阳1号' }]
            }, {
                id: 12,
                name: '海淀',
                children: [{ id: 121, name: '海淀1号' }]
            }]
        }, {
            id: 2,
            name: '上海',
            children: [{
                id: 21,
                name: '浦东',
                children: [{ id: 211, name: '浦东1号' }]
            },
            {
                id: 22,
                name: '虹口',
                children: [{ id: 221, name: '虹口1号' }]
            }]
        }];

        // 正向-树形结构转平铺
        // 从外到内依次递归，有 children 则继续递归
        function treeToArr(data, pid = null, res = []) {
            data.forEach(item => {
                res.push({ pid: pid, id: item.id, name: item.name });
                if (item.children && item.children.length !== 0) {
                    treeToArr(item.children, item.id, res);
                }
            });
            return res;
        };

        var arr = treeToArr(tree);
        console.log(arr);




    </script>
</body>

</html>

平铺结构转为树形结构

<!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>平铺结构转化为树形结构</title>
</head>
<body>
    <script>
          const arr = [
            { pid: null, id: 1, name: '北京' },
            { pid: 1, id: 11, name: '朝阳' },
            { pid: 11, id: 111, name: '朝阳1号' },
            { pid: 1, id: 12, name: '海淀' },
            { pid: 12, id: 121, name: '海淀1号' },
            { pid: null, id: 2, name: '上海' },
            { pid: 2, id: 21, name: '浦东' },
            { pid: 21, id: 211, name: '浦东1号' },
            { pid: 2, id: 22, name: '虹口' },
            { pid: 22, id: 221, name: '虹口1号' }
        ];

        // 依次在数组中找到每一层级对应的元素，同时每个元素的 children 属性对应的 value 通过 pid 去找到，然后递归执行下去
        function arrToTree(arr, pid = null) {
            const res = [];
            arr.forEach(item => {
                if (item.pid === pid) {
                    // 这样每次都需要遍历整个数组，因此时间复杂度为 n*n
                    // const children = arrToTree(arr, item.id)   

                    // 往下递归时，每次数组的大小都在减小，每次都筛选掉父代元素，最终的时间复杂度为 n*logn
                    const children = arrToTree(arr.filter(v => v.pid !== pid), item.id);
                    if (children.length) {
                        res.push({ ...item, children })
                    } else {
                        res.push({ ...item })
                    }
                }
            });
            return res;
        };

        const tree = arrToTree(arr);
        console.log(JSON.stringify(tree, null, 2));
    </script>
</body>
</html>

臭宝520

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
树形结构与平铺结构之间的转换

树形结构转为平铺结构<!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">
复制链接

扫一扫