JS遍历前端树形结构获取指定节点路径

在日常工作中，有时候前端需要给指定树节点进行定位选中（后端传递的是整棵树）。这时候无论是ztree还是element的树形控件都需要获取指定节点的路径。

此节点的路径可以在前端也可以在后端进行遍历获取，如果后端生成树的时候并不是获取所有树节点再递归生成树的话，这种情况在后端获取指定节点的路径难度会很大，此时则可以进行前端遍历树结构。

本文遍历树结构是在的vue.js中实现的：

后端传递的树形结构如下(本文后端是将树形结构存于数组中的):

 

前端遍历树如下：

        /*arr为树形结构数组，value为要查询的树节点的标识值，key则为标识
           我是用的是id,则key是"id"*/
       

        // 获取指定节点的路径数组
        getPathByKey: function(value, key, arr) {
            // 用于存储节点唯一标识值路径数组
            this.nodePathArray = [];
            try {
                for (let i = 0; i < arr.length; i++) {
                    this.getNodePath(arr[i],key,value);
                }
            } catch (e) {
                return this.nodePathArray;
            }
        },
        getNodePath: function (node,key,value){
            // 这里可以自定义push的内容，而不是整个node,而且这里node也包含了children
            this.nodePathArray.push(node.id);
            // 找到符合条件的节点，通过throw终止掉递归
            if (node[key] === value) {
                // 也可以直接使用return;结束循环
                throw ("over!");
            }
            if (node.children && node.children.length > 0) {
                for (var i = 0; i < node.children.length; i++) {
                    this.getNodePath(node.children[i],key,value);
                }
                // 当前节点的子节点遍历完依旧没找到，则删除路径中的该节点
                this.nodePathArray.pop();
            }
            else {
                // 找到叶子节点时，删除路径当中的该叶子节点
                this.nodePathArray.pop();
            }
        },

找到节点路径后就可以进行使用了！