js递归算法实现树节点分级

最新推荐文章于 2024-01-21 10:58:40 发布

ningh_ai

最新推荐文章于 2024-01-21 10:58:40 发布

阅读量1.6k

点赞数 1

分类专栏：算法文章标签：递归

本文链接：https://blog.youkuaiyun.com/weixin_45610510/article/details/101616689

版权

算法专栏收录该内容

1 篇文章

订阅专栏

数组里只有一层对象，通过id和pid确定父子级关系(不确定有多少层关系)，通过递归计算后得到每个节点处于第几层(lvl属性)，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>递归函数-树节点分级</title>
</head>
<body>
    <h5>递归树节点分级</h5>
</body>
<script type="text/javascript">
    function initData() {
        var nodeArr = [
        {id:1, pId:0, name: "0级"},
        {id:11, pId:1, name: "一级1"},
        {id:13, pId:1, name: "一级3"},
        {id:121, pId:11, name: "二级1"},
            {id:12111, pId:1211, name: "四级1"},
        {id:122, pId:12, name: "二级2"},
        {id:1211, pId:121, name: "三级1"},
            {id:12, pId:1, name: "一级2"},
        {id:1221, pId:122, name: "三级2"},
        {id:1231, pId:123, name: "三级3"},
        {id:12112, pId:1211, name: "四级2"},
        {id:12121, pId:1221, name: "四级3"},
        {id:12311, pId:1231, name: "四级4"},
        {id:12312, pId:1231, name: "四级5"},
        {id:123, pId:13, name: "二级3"}
        ];
        // console.log(nodeArr);
        var res = calcuaLevel(nodeArr, 0, []);
        console.log(res.sort(function(a, b) {
            return a.id - b.id;
        }));
        var child = getRealChildNodes(res, 1, []);
        console.log('child', child);
    }
    
    /* 递归计算树的层级 */
    function calcuaLevel(nodes, level, newArr) {
        nodes.forEach(function(val, i) {
            val.isPar = true; 
        });
        nodes.forEach(function(val, idx) {
            for (var i=0; i<nodes.length; i++) {
                if (val.pId == nodes[i].id) {
                    val.isPar = false;
                    break;
                }
            }
        });
        for (var k=nodes.length-1; k >= 0; k--) {
            if (nodes[k].isPar) {
                nodes[k].lvl = level;
                newArr.push(nodes[k]);
                nodes.splice(k, 1);
            }
        }
        if (nodes.length == 0) 
            return newArr;
        return calcuaLevel(nodes, ++level, newArr);
    }

    /* 获取最下层节点列表 */
    function getRealChildNodes(allNodes, targetId, childNodes) {
        var flag = false;
        for (var i = allNodes.length-1; i >= 0; i--) {
            if (allNodes[i].pId == targetId) {
                flag = true;
                getRealChildNodes(allNodes, allNodes[i].id, childNodes);
            }
        }
        if (!flag) {
            childNodes.push(targetId);
        }
        return childNodes;
    }
    initData();
</script>
</html>