树形数据统计叶子节点数量问题

Question

后台接口返回树形数据如下：

[{

"id": "root",
"pid": "null",
"label": "数据库索引",
"childCount": 0,
"children": [{
    "id": "0",
    "pid": "root",
    "label": "db0",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "1",
    "pid": "root",
    "label": "db1",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "2",
    "pid": "root",
    "label": "db2",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "3",
    "pid": "root",
    "label": "db3",
    "childCount": 0,
    "children": [{
        "id": "sys",
        "pid": "3",
        "label": "sys",
        "childCount": 0,
        "children": [{
            "id": "sys:user",
            "pid": "sys",
            "label": "user",
            "childCount": 0,
            "children": [{
                "id": "sys:user:id",
                "pid": "sys:user",
                "label": "id",
                "childCount": 4,
                "children": [{
                    "id": "sys:user:id:3",
                    "pid": "sys:user:id",
                    "label": "sys:user:id:3",
                    "childCount": 0,
                    "leaf": "true"
                }, {
                    "id": "sys:user:id:674728729150226432",
                    "pid": "sys:user:id",
                    "label": "sys:user:id:674728729150226432",
                    "childCount": 0,
                    "leaf": "true"
                }, {
                    "id": "sys:user:id:674728936684388352",
                    "pid": "sys:user:id",
                    "label": "sys:user:id:674728936684388352",
                    "childCount": 0,
                    "leaf": "true"
                }, {
                    "id": "sys:user:id:677820231715913728",
                    "pid": "sys:user:id",
                    "label": "sys:user:id:677820231715913728",
                    "childCount": 0,
                    "leaf": "true"
                }],
                "leaf": "false"
            }, {
                "id": "sys:user:permission",
                "pid": "sys:user",
                "label": "permission",
                "childCount": 0,
                "children": [{
                    "id": "sys:user:permission:userId",
                    "pid": "sys:user:permission",
                    "label": "userId",
                    "childCount": 4,
                    "children": [{
                        "id": "sys:user:permission:userId:677820231715913728",
                        "pid": "sys:user:permission:userId",
                        "label": "sys:user:permission:userId:677820231715913728",
                        "childCount": 0,
                        "leaf": "true"
                    }, {
                        "id": "sys:user:permission:userId:674728936684388352",
                        "pid": "sys:user:permission:userId",
                        "label": "sys:user:permission:userId:674728936684388352",
                        "childCount": 0,
                        "leaf": "true"
                    }, {
                        "id": "sys:user:permission:userId:674728729150226432",
                        "pid": "sys:user:permission:userId",
                        "label": "sys:user:permission:userId:674728729150226432",
                        "childCount": 0,
                        "leaf": "true"
                    }, {
                        "id": "sys:user:permission:userId:3",
                        "pid": "sys:user:permission:userId",
                        "label": "sys:user:permission:userId:3",
                        "childCount": 0,
                        "leaf": "true"
                    }],
                    "leaf": "false"
                }],
                "leaf": "false"
            }, {
                "id": "sys:user:login",
                "pid": "sys:user",
                "label": "login",
                "childCount": 0,
                "children": [{
                    "id": "sys:user:login:failCount",
                    "pid": "sys:user:login",
                    "label": "failCount",
                    "childCount": 1,
                    "children": [{
                        "id": "sys:user:login:failCount:liuhu",
                        "pid": "sys:user:login:failCount",
                        "label": "sys:user:login:failCount:liuhu",
                        "childCount": 0,
                        "leaf": "true"
                    }],
                    "leaf": "false"
                }],
                "leaf": "false"
            }, {
                "id": "sys:user:access",
                "pid": "sys:user",
                "label": "sys:user:access",
                "childCount": 0,
                "leaf": "true"
            }],
            "leaf": "false"
        }, {
            "id": "sys:login",
            "pid": "sys",
            "label": "login",
            "childCount": 0,
            "children": [{
                "id": "sys:login:token",
                "pid": "sys:login",
                "label": "token",
                "childCount": 2,
                "children": [{
                    "id": "sys:login:token:eyJhbGciOiJSUzI1NiJ9.eyJ1aWQiOiIzIiwidXNlclJvbGVzIjoiYWRtaW4sIGV2ZXJ5b25lLCBjb21wQWRtaW4iLCJzdWIiOiJhZG1pbiIsImNvZGUiOjAsImNyZWF0ZVRpbWUiOiIyMDIwLTAyLTE3IDE3OjI3OjMwIiwidXNlck5hbWUiOiLnrqHnkIblkZgiLCJleHAiOjE1ODE5Mzg4NTAsImp0aSI6IjY3OTAxNjA4NDk4ODIzMTY4MCJ9.EC69qTIZd7AoNzPaScO8p0vAU-XtvzQD7kfGqXGVotRyix5Y0uuBZEi8QbpeueU4d-95Q4rHqc1XjnCvNFqCQw",
                    "pid": "sys:login:token",
                    "label": "sys:login:token:eyJhbGciOiJSUzI1NiJ9.eyJ1aWQiOiIzIiwidXNlclJvbGVzIjoiYWRtaW4sIGV2ZXJ5b25lLCBjb21wQWRtaW4iLCJzdWIiOiJhZG1pbiIsImNvZGUiOjAsImNyZWF0ZVRpbWUiOiIyMDIwLTAyLTE3IDE3OjI3OjMwIiwidXNlck5hbWUiOiLnrqHnkIblkZgiLCJleHAiOjE1ODE5Mzg4NTAsImp0aSI6IjY3OTAxNjA4NDk4ODIzMTY4MCJ9.EC69qTIZd7AoNzPaScO8p0vAU-XtvzQD7kfGqXGVotRyix5Y0uuBZEi8QbpeueU4d-95Q4rHqc1XjnCvNFqCQw",
                    "childCount": 0,
                    "leaf": "true"
                }, {
                    "id": "sys:login:token:eyJhbGciOiJSUzI1NiJ9.eyJ1aWQiOiIzIiwidXNlclJvbGVzIjoiYWRtaW4sIGV2ZXJ5b25lLCBjb21wQWRtaW4iLCJzdWIiOiJhZG1pbiIsImNvZGUiOjAsImNyZWF0ZVRpbWUiOiIyMDIwLTAyLTE3IDE3OjA0OjE4IiwidXNlck5hbWUiOiLnrqHnkIblkZgiLCJleHAiOjE1ODE5Mzc0NTgsImp0aSI6IjY3OTAxMDI0OTYyNTA0Mjk0NCJ9.SI6naxD6O9fBn7NV5aErTnj0_O_eZBnmBBwHNePgi_P5lVaj_epeqj1ZB145exwzZuKCYo203ZOQLGU7lBrOMg",
                    "pid": "sys:login:token",
                    "label": "sys:login:token:eyJhbGciOiJSUzI1NiJ9.eyJ1aWQiOiIzIiwidXNlclJvbGVzIjoiYWRtaW4sIGV2ZXJ5b25lLCBjb21wQWRtaW4iLCJzdWIiOiJhZG1pbiIsImNvZGUiOjAsImNyZWF0ZVRpbWUiOiIyMDIwLTAyLTE3IDE3OjA0OjE4IiwidXNlck5hbWUiOiLnrqHnkIblkZgiLCJleHAiOjE1ODE5Mzc0NTgsImp0aSI6IjY3OTAxMDI0OTYyNTA0Mjk0NCJ9.SI6naxD6O9fBn7NV5aErTnj0_O_eZBnmBBwHNePgi_P5lVaj_epeqj1ZB145exwzZuKCYo203ZOQLGU7lBrOMg",
                    "childCount": 0,
                    "leaf": "true"
                }],
                "leaf": "false"
            }],
            "leaf": "false"
        }, {
            "id": "sys:config",
            "pid": "sys",
            "label": "config",
            "childCount": 0,
            "children": [{
                "id": "sys:config:userId",
                "pid": "sys:config",
                "label": "userId",
                "childCount": 0,
                "children": [{
                    "id": "sys:config:userId:3",
                    "pid": "sys:config:userId",
                    "label": "3",
                    "childCount": 0,
                    "children": [{
                        "id": "sys:config:userId:3:resId",
                        "pid": "sys:config:userId:3",
                        "label": "resId",
                        "childCount": 0,
                        "children": [{
                            "id": "sys:config:userId:3:resId:488103729589911552",
                            "pid": "sys:config:userId:3:resId",
                            "label": "488103729589911552",
                            "childCount": 0,
                            "children": [{
                                "id": "sys:config:userId:3:resId:488103729589911552:configType",
                                "pid": "sys:config:userId:3:resId:488103729589911552",
                                "label": "configType",
                                "childCount": 1,
                                "children": [{
                                    "id": "sys:config:userId:3:resId:488103729589911552:configType:custom-query",
                                    "pid": "sys:config:userId:3:resId:488103729589911552:configType",
                                    "label": "sys:config:userId:3:resId:488103729589911552:configType:custom-query",
                                    "childCount": 0,
                                    "leaf": "true"
                                }],
                                "leaf": "false"
                            }],
                            "leaf": "false"
                        }, {
                            "id": "sys:config:userId:3:resId:570288921326387200",
                            "pid": "sys:config:userId:3:resId",
                            "label": "570288921326387200",
                            "childCount": 0,
                            "children": [{
                                "id": "sys:config:userId:3:resId:570288921326387200:configType",
                                "pid": "sys:config:userId:3:resId:570288921326387200",
                                "label": "configType",
                                "childCount": 1,
                                "children": [{
                                    "id": "sys:config:userId:3:resId:570288921326387200:configType:custom-query",
                                    "pid": "sys:config:userId:3:resId:570288921326387200:configType",
                                    "label": "sys:config:userId:3:resId:570288921326387200:configType:custom-query",
                                    "childCount": 0,
                                    "leaf": "true"
                                }],
                                "leaf": "false"
                            }],
                            "leaf": "false"
                        }, {
                            "id": "sys:config:userId:3:resId:674207622705971200",
                            "pid": "sys:config:userId:3:resId",
                            "label": "674207622705971200",
                            "childCount": 0,
                            "children": [{
                                "id": "sys:config:userId:3:resId:674207622705971200:configType",
                                "pid": "sys:config:userId:3:resId:674207622705971200",
                                "label": "configType",
                                "childCount": 1,
                                "children": [{
                                    "id": "sys:config:userId:3:resId:674207622705971200:configType:custom-query",
                                    "pid": "sys:config:userId:3:resId:674207622705971200:configType",
                                    "label": "sys:config:userId:3:resId:674207622705971200:configType:custom-query",
                                    "childCount": 0,
                                    "leaf": "true"
                                }],
                                "leaf": "false"
                            }],
                            "leaf": "false"
                        }],
                        "leaf": "false"
                    }],
                    "leaf": "false"
                }],
                "leaf": "false"
            }],
            "leaf": "false"
        }],
        "leaf": "false"
    }, {
        "id": "jtportal",
        "pid": "3",
        "label": "jtportal",
        "childCount": 0,
        "children": [{
            "id": "jtportal:quick",
            "pid": "jtportal",
            "label": "quick",
            "childCount": 0,
            "children": [{
                "id": "jtportal:quick:entity",
                "pid": "jtportal:quick",
                "label": "entity",
                "childCount": 2,
                "children": [{
                    "id": "jtportal:quick:entity:674728729150226432",
                    "pid": "jtportal:quick:entity",
                    "label": "jtportal:quick:entity:674728729150226432",
                    "childCount": 0,
                    "leaf": "true"
                }, {
                    "id": "jtportal:quick:entity:3",
                    "pid": "jtportal:quick:entity",
                    "label": "jtportal:quick:entity:3",
                    "childCount": 0,
                    "leaf": "true"
                }],
                "leaf": "false"
            }],
            "leaf": "false"
        }, {
            "id": "jtportal:common",
            "pid": "jtportal",
            "label": "common",
            "childCount": 0,
            "children": [{
                "id": "jtportal:common:system",
                "pid": "jtportal:common",
                "label": "system",
                "childCount": 1,
                "children": [{
                    "id": "jtportal:common:system:3",
                    "pid": "jtportal:common:system",
                    "label": "jtportal:common:system:3",
                    "childCount": 0,
                    "leaf": "true"
                }],
                "leaf": "false"
            }],
            "leaf": "false"
        }],
        "leaf": "false"
    }],
    "leaf": "false"
}, {
    "id": "4",
    "pid": "root",
    "label": "db4",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "5",
    "pid": "root",
    "label": "db5",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "6",
    "pid": "root",
    "label": "db6",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "7",
    "pid": "root",
    "label": "db7",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "8",
    "pid": "root",
    "label": "db8",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "9",
    "pid": "root",
    "label": "db9",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "10",
    "pid": "root",
    "label": "db10",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "11",
    "pid": "root",
    "label": "db11",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "12",
    "pid": "root",
    "label": "db12",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "13",
    "pid": "root",
    "label": "db13",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "14",
    "pid": "root",
    "label": "db14",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "15",
    "pid": "root",
    "label": "db15",
    "childCount": 0,
    "leaf": "true"
}, {
    "id": "16",
    "pid": "root",
    "label": "db16",
    "childCount": 0,
    "leaf": "true"
}],
"leaf": "false"

}]

页面展示如下：

后台和我商量想让我在前端计算出每个节点下所有叶子节点的数量，并显示出来。前端是定义了el-tree的props，但是我需要算出每个节点的childCount（当前节点下所有叶子节点数量）

我如何才能计算出这个数量呢？

Answer 1

和我以前的需求有点类似，如果你确定没有childCount字段的就是叶子结点的话

function calc(node) {
    if (!node) return 0
    const children = node.children
    const childCount = node.childCount === undefined ? 1 : node.childCount
    if (!children) return childCount
    const value = childCount + children.reduce((v, child) => v + calc(child), 0)
    node.childCount = value
    return value
}

arr.forEach(i => calc(i))

console.log(arr)