1. 90前端首页
  2. 前端开发
  3. JavaScript

递归遍历树结构,从某个节点开始查找其子节点中的所有叶子节点

背景

现在项目中哟这样的一个需求,左边显示一棵树目录,点击目录的一级或二级节点,右边显示其子节点中的所有叶子节点,而且要求前端来做这个,不用调用接口请求了,那么,这里记录一下我的实现方法。点击叶子节点,是另外的显示,此处不做讨论。

树结构

先来构造一个树形的array:

        var tree = [
            {
                \"id\": 1,
                \"lv\": \"L1\",
                \"pid\": 0,
                \"isLastLevel\": 0,
                \"des\": \"根\",
                \"children\": [
                    {
                        \"id\": 2,
                        \"lv\": \"L2\",
                        \"pid\": 1,
                        \"isLastLevel\": 0,
                        \"des\": \"项目\",
                        \"children\": [
                            {
                                \"id\": 4,
                                \"lv\": \"L3\",
                                \"pid\": 2,
                                \"isLastLevel\": 1,
                                \"des\": \"创建\",
                                \"children\": null
                            }
                        ]
                    },
                    {
                        \"id\": 3,
                        \"lv\": \"L2\",
                        \"pid\": 1,
                        \"des\": \"任务\",
                        \"isLastLevel\": 0,
                        \"children\": [
                            {
                                \"id\": 5,
                                \"lv\": \"L3\",
                                \"pid\": 3,
                                \"isLastLevel\": 1,
                                \"des\": \"创建\",
                                \"children\": null
                            },
                            {
                                \"id\": 6,
                                \"lv\": \"L3\",
                                \"pid\": 3,
                                \"isLastLevel\": 1,
                                \"des\": \"开始\",
                                \"children\": null
                            },
                            {
                                \"id\": 7,
                                \"lv\": \"L3\",
                                \"pid\": 3,
                                \"isLastLevel\": 1,
                                \"des\": \"结束\",
                                \"children\": null
                            }
                        ]
                    }
                ]
            }
        ];

当然,实际上这棵树是后端接口返回的数据。
我们这里只是做个模拟。
树的效果:
递归遍历树结构,从某个节点开始查找其子节点中的所有叶子节点

树结构 查找所有叶子节点

       
        /* 参数
        * array 树结构 查找所有叶子节点
        */
        function parseTreeJson(array) {
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                // 1.判断element.children是对象
                if (element.children && typeof (element.children) == \'object\') {
                    parseTreeJson(element.children)
                } else {
                    // 判断是否为子节点
                    if (element.isLastLevel === 1) {
                        console.log(element.des + \'的id:\' + element.id)
                        // 获得符合的 node
                        nodes.push(element);
                        // 获得符合的 nodeId
                        nodeIds.push(element.id);
                    }
                }
            }
        }

调用一下试试看:

        var nodes = [];
        var nodeIds = [];
        parseTreeJson(tree);
        console.log(\'整棵树的 子节点nodeIds:\' + nodeIds)

树结构 遍历查找某个节点

下面的方法用来遍历查找某个节点,然后调用上面的parseTreeJson(array)方法,实现从该节点开始查找其子节点中的所有叶子节点。


        /* 参数
        * array 树结构
        * nodeId 某个节点的id 从该节点开始查找其子节点中的所有叶子节点
        */
        function loopTreeJson(array, nodeId) {
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                if (element.id === nodeId) {
                    // 判断element.children是对象
                    if (element.children && typeof (element.children) == \'object\') {
                        // 查找叶子节点
                        parseTreeJson(element.children)
                    }
                } else {
                    // 判断element.children是对象
                    if (element.children && typeof (element.children) == \'object\') {
                        // 继续遍历子节点查找当前nodeId
                        loopTreeJson(element.children, nodeId)
                    }
                }
            }
        }

本来应该是点击树节点,获取当前节点id后,调用loopTreeJson(tree, id)即可,这里不再粘贴html显示树的逻辑,下面是模拟调用:

        nodes = [];
        nodeIds = [];
        loopTreeJson(tree, 1);
        console.log(\'点击根nodeId:1 找到的子节点nodeIds:\' + nodeIds);

        nodes = [];
        nodeIds = [];
        loopTreeJson(tree, 2);
        console.log(\'点击项目nodeId:2 找到的子节点nodeIds:\' + nodeIds);

        nodes = [];
        nodeIds = [];
        loopTreeJson(tree, 3);
        console.log(\'点击任务nodeId:3 找到的子节点nodeIds:\' + nodeIds);

调用结果:
递归遍历树结构,从某个节点开始查找其子节点中的所有叶子节点

完整代码查看:递归遍历树结构,从某个节点开始查找其子节点中的所有叶子节点,打开这个代码示例页面,F12打开控制台可以看到输出。

参考

递归遍历树形json

本文来自网络整理,转载请注明原出处:https://segmentfault.com/a/1190000022056355

展开阅读全文

发表评论

登录后才能评论