遞歸遍歷樹結構，從某個節點開始查找其子節點中的全部葉子節點

背景

如今項目中喲這樣的一個需求，左邊顯示一棵樹目錄，點擊目錄的一級或二級節點，右邊顯示其子節點中的全部葉子節點，並且要求前端來作這個，不用調用接口請求了，那麼，這裏記錄一下個人實現方法。點擊葉子節點，是另外的顯示，此處不作討論。

樹結構

先來構造一個樹形的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