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

2020/3/18 14:24:05

编程Tag： 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);

调用结果：