递归将列表转换成树形结构、递归将树形结构转换成列表 (javascript)

加蓓努力我先飞

726人浏览 · 2022-06-30 15:54:56

加蓓努力我先飞 · 2022-06-30 15:54:56 发布

递归将列表转换成树形结构、递归将树形结构转换成列表

1.递归将列表转换成树形结构(javascript)
2.递归将树形结构转换成列表

1.递归将列表转换成树形结构(javascript)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <script>
        let dataList = [{
            label: '陕西省',
            index: 0,
            id: '陕西省0',
            pid: '',
            child: []
        }, {
            label: '西安市',
            index: 1,
            id: '西安市1',
            pid: '陕西省0',
            child: []
        }, {
            label: '雁塔区',
            index: 2,
            id: '雁塔区2',
            pid: '西安市1'
        }, {
            label: '碑林区',
            index: 2,
            id: '碑林区2',
            pid: '西安市1'
        }, {
            label: '山西省',
            index: 0,
            id: '山西省0',
            pid: '',
            child: []
        }, {
            label: '太原市',
            index: 1,
            id: '太原市1',
            pid: '山西省0',
            child: []
        }, {
            label: '尖草坪区',
            index: 2,
            id: '尖草坪区2',
            pid: '太原市1'
        }]

        // 递归将列表转换成树形结构
        function listToTreeData(list, rootValue) {
            var arr = []
            list.forEach(item => {
                if (item.pid === rootValue) {
                    const children = listToTreeData(list, item.id)
                    if (children.length) {
                        item.child = children
                    }
                    arr.push(item)
                }
            })
            return arr
        }
        let treeData = listToTreeData(dataList, '') // 调用方法
        console.log("treeData", treeData);
        let list = [{
                label: '陕西省',
                index: 0,
                id: '陕西省0',
                pid: '',
                child: [{
                    label: '西安市',
                    index: 1,
                    id: '西安市1',
                    pid: '陕西省0',
                    child: [{
                        label: '雁塔区',
                        index: 2,
                        id: '雁塔区2',
                        pid: '西安市1'
                    }, {
                        label: '碑林区',
                        index: 2,
                        id: '碑林区2',
                        pid: '西安市1'
                    }, ]
                }]
            }, {
                label: '山西省',
                index: 0,
                id: '山西省0',
                pid: '',
                child: [{
                    label: '太原市',
                    index: 1,
                    id: '太原市1',
                    pid: '山西省0',
                    child: [{
                        label: '尖草坪区',
                        index: 2,
                        id: '尖草坪区2',
                        pid: '太原市1'
                    }]
                }]
            }, ]

    </script>
</body>

</html>

2.递归将树形结构转换成列表

<!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>
    <script>
        let list = [{
            label: '陕西省',
            index: 0,
            id: '陕西省0',
            pid: '',
            child: [{
                label: '西安市',
                index: 1,
                id: '西安市1',
                pid: '陕西省0',
                child: [{
                    label: '雁塔区',
                    index: 2,
                    id: '雁塔区2',
                    pid: '西安市1'
                }, {
                    label: '碑林区',
                    index: 2,
                    id: '碑林区2',
                    pid: '西安市1'
                }, ]
            }]
        }, {
            label: '山西省',
            index: 0,
            id: '山西省0',
            pid: '',
            child: [{
                label: '太原市',
                index: 1,
                id: '太原市1',
                pid: '山西省0',
                child: [{
                    label: '尖草坪区',
                    index: 2,
                    id: '尖草坪区2',
                    pid: '太原市1'
                }]
            }]
        }, ]

        function flatten(arr) {
            return [].concat(...arr.map(item => {
                if (item.child) {
                    let arr = [].concat(item, ...this.flatten(item.child));
                    delete item.child;
                    return arr;
                }
                return [].concat(item);
            }));
        }
        console.log('flatten', flatten(list))
        let origin = [{
            label: '陕西省',
            index: 0,
            id: '陕西省0',
            pid: ''
        }, {
            label: '西安市',
            index: 1,
            id: '西安市1',
            pid: '陕西省0'
        }, {
            label: '雁塔区',
            index: 2,
            id: '雁塔区2',
            pid: '西安市1'
        }, {
            label: '碑林区',
            index: 2,
            id: '碑林区2',
            pid: '西安市1'
        }, {
            label: '山西省',
            index: 0,
            id: '山西省0',
            pid: ''
        }, {
            label: '太原市',
            index: 1,
            id: '太原市1',
            pid: '山西省0'
        }, {
            label: '尖草坪区',
            index: 2,
            id: '尖草坪区2',
            pid: '太原市1'
        }]
    </script>
</body>

</html>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..