背景

Ant Design中菜单树存在多级，需要将父节点到子节点的所有key找到，实现实时的展开

树结构

const menus = [
    {
        key: uuid,
        items: {
            key: uuid,
            items: [
                {
                    ...
                }
            ]
        }
    }
]

实现思路

外层用变量res记录每次遍历子节点时对应的父节点的key值，通过变量hasFind记录是否找到，如果同一层级的所有父节点都没有遍历到目标key，则删除res中其上层的父节点的key，递归遍历即可。

代码实现

let res = [];
let hasFind = [];

function loop(menus, targetKey){
    for(let i = 0;i< menus.length; i++){
        if(hasFind){
            return;
        }
        if(menus[i].key === targetKey){
            hasFind = true;
            res.push(menus[i].key)
        }
        if(Array.isArray(menus[i].items)){
            res.push(menus[i].key);
            loop(menus[i].items, targetKey)
        }
        if(!hasFind && i === menu.length -1 ){
            res.pop();
        }
    }
}