求页面刷新之后定位树展开节点算法

Question

1. 目录树初始化刚开始只返回二层结构。

[
    {
      name: '全部',
      path: '全部/',
      id: 1,
      childs: 2,
      children: [
        {
           name: '一级菜单01',
           path: '全部/一级菜单01/',
           id: 2,
           childs: 2,
           children:null
        },
        {
           name: '一级菜单02',
           path: '全部/一级菜单02/',
           id: 3,
           childs: 1,
           children:null
        },
      ]
    }
]

当点击节点的时候，会通过点击的 id 和 childs 是否为 0 当前节点下面的子节点，并添加 expanded: true，让其展开。
现在打开 路径是 path: '全部/一级菜单01/二级菜单02/三级菜单04' 怎么样通过这个路径去匹配到初始化目录树中的 全部/一级菜单01/通过id获取到children，在children中匹配到全部/一级菜单01/二级菜单02/通过id获取到children，在children中匹配到全部/一级菜单01/二级菜单02/三级菜单04，并将其展开？

思路感觉是通过路径全部/一级菜单01/二级菜单02/三级菜单04去一级级的匹配树中包含 Path的。
谢谢。

Answer 1

//原数据
let arrOrigin = [{
    name: "全部",
    path: "全部/",
    id: 1,
    childs: 2,
    children: [
        {
            name: "一级菜单01",
            path: "全部/一级菜单01/",
            id: 2,
            childs: 2,
            children: null
        },
        {
            name: "一级菜单02",
            path: "全部/一级菜单02/",
            id: 3,
            childs: 1,
            children: null
        },
    ]
}];

//路径节点数据
let path = "全部/一级菜单01/二级菜单02/三级菜单04";

let arrPath = path.split("/");
console.log(arrPath); //节点数组

//递归处理
function render(arrOrigin, arrPath) {
    if (arrPath.length > 0) {
    //如果路径节点全部处理完则结束

        //取出当前节点，并改变节点数祖
        let currentNode = arrPath.shift();

        arrOrigin.forEach(element => {
            if (element.name == currentNode) {
                //在当前层级找到匹配的 name 设置 expanded
                element.expanded = true;
                if (element.childs > 0 && element.children) {
                    //如果当前层级有下级，则把下级引用加上剩下的节点数组放入同一方法递归。
                    return render(element.children, arrPath);
                }
            }
        });
    }
}


render(arrOrigin, arrPath);

//输出结果
console.log(JSON.stringify(arrOrigin, null, 4));

输出得到：

[ '全部', '一级菜单01', '二级菜单02', '三级菜单04' ]
[
    {
        "name": "全部",
        "path": "全部/",
        "id": 1,
        "childs": 2,
        "children": [
            {
                "name": "一级菜单01",
                "path": "全部/一级菜单01/",
                "id": 2,
                "childs": 2,
                "children": null,
                "expanded": true
            },
            {
                "name": "一级菜单02",
                "path": "全部/一级菜单02/",
                "id": 3,
                "childs": 1,
                "children": null
            }
        ],
        "expanded": true
    }
]