js获取树形结构指定节点的路径

前几天在工作中业务提了个需求，大致意思是在树形表格中查看某个节点详情的时候，需要在详情页面将该节点的路径展示出来，下面就介绍一种节点获取路径的方法。

假设有如下一颗树

let treeArray = [{
        id: 1,
        nodeName: 'a',
        children: [{
                id: 11,
                nodeName: 'ab',
                children: [{
                        id: 111,
                        nodeName: 'abc'
                    },
                    {
                        id: 112,
                        nodeName: 'abd'
                    }
                ]
            },
            {
                id: 12,
                nodeName: 'ac',
                children: [{
                    id: 121,
                    nodeName: 'aca'
                }]
            }
        ]
    },
    {
        id: 2,
        nodeName: 'b'
    },
    {
        id: 3,
        nodeName: 'c',
        children: [{
                id: 31,
                nodeName: 'cb',
                children: [{
                        id: 311,
                        nodeName: 'cbc'
                    },
                    {
                        id: 312,
                        nodeName: 'cbd'
                    }
                ]
            },
            {
                id: 32,
                nodeName: 'cc',
                children: [{
                    id: 321,
                    nodeName: 'cca'
                }]
            }
        ]
    },
    {
        id: 4,
        nodeName: 'd'
    }
];

// 首先我们先定义个数组，用来保存路径节点id
let nodePathArray= []

// (tree为目标树，targetId为目标节点id)
function getNodeRoute(tree, targetId) {
	for (let index = 0; index < tree.length; index++) {
	    if (tree[index].children) {
	        let endRecursiveLoop = getNodeRoute(tree[index].children, targetId)
	        if (endRecursiveLoop) {
	            nodePathArray.push(tree[index].id)
	            return true
	        }
	    }
	    if (tree[index].id === targetId) {
	        nodePathArray.push(tree[index].id)
	        return true
	    }
	}
}

getNodeRoute(treeArray,112) //查找id为112的节点路径
console.log(nodePathArray.reverse().join('->'));

这种方式简单粗暴，但是有个小缺点，就是找到节点之后回归，数组添加顺序是先将目标节点添加到数组中，而后再添加其父节点……(子节点->父节点->…->根节点)。所以代码执行完成之后需要通过reverse将数组反转一下才能得到正确的路径。