js 递归总结

1.根据子id 递归查找所有父级 id  主要用于vue  element 中 Cascader 级联选择器展示 在编辑中回显默认展示

tree 数据

var arr = [{
    "label": "文件夹",
    "parentId": null,
    "id": "0",
    "children": [{
            "label": "文件夹1",
            "parentId": "0",
            "id": "1",
            "children": [{
                    "label": "文件夹1-1",
                    "parentId": "1",
                    "id": "1.1",
                    "children": null
                },
                {
                    "label": "文件夹1-2",
                    "parentId": "1",
                    "id": "1.2",
                    "children": null
                },
                {
                    "label": "文件夹1-3",
                    "parentId": "1",
                    "id": "1.3",
                    "children": [{
                            "label": "文件夹1-3-1",
                            "parentId": "1.3",
                            "id": "1.3.1",
                            "children": [{
                                "label": "文件夹1-3-1-1",
                                "parentId": "1.3.1",
                                "id": "1.3.1.1",
                                "children": null
                            }]
                        },
                        {
                            "label": "文件夹1-3-2",
                            "parentId": "1.3",
                            "id": "1.3.2",
                            "children": null
                        },
                        {
                            "label": "文件夹1-3-3",
                            "parentId": "1.3",
                            "id": "1.3.3",
                            "children": null
                        }
                    ]
                }
            ]
        },
        {
            "label": "文件夹2",
            "parentId": "0",
            "id": "2",
            "children": [{
                "label": "文件夹2-1",
                "parentId": "2",
                "id": "2.1",
                "children": null
            }]
        },
        {
            "label": "文件夹3",
            "parentId": "0",
            "id": "3",
            "children": null
        }

    ]
}];

递归查找

//递归找父级id
getParentIds(treeData, nodeId) {
                var arrRes = [];
                if(treeData.length == 0) {
                    if(!!nodeId) {
                        arrRes.unshift(nodeId);
                    }
                    return arrRes;
                }
                let rev = (data, nodeId) => {
                    for(var i = 0, length = data.length; i < length; i++) {
                        let node = data[i];
                        if(node.id == nodeId) {
                            arrRes.unshift(nodeId);
                            rev(treeData, node.parentId);
                            break;
                        } else {
                            if(!!node.children) {
                                rev(node.children, nodeId);
                            }
                        }
                    }
                    return arrRes;
                };
                arrRes = rev(treeData, nodeId);
                return arrRes;
            },

结果

console.log(getParentIds(arr,'1.3.1'))  //["0", "1", "1.3", "1.3.1"]

2.  删除children:[] 存在且为空的情况   主要用于vue  element 中 Cascader 级联选择器展示

var tree = [{
        value: 'ziyuan',
        label: '资源',
        children: [
            {
                value: 'axure',
                label: 'Axure Components',
                children: []
            },
            {
                value: 'sketch',
                label: 'Sketch Templates',
                children: []
             },
             {
                value: 'jiaohu',
                label: '组件交互文档',
                children: []
             }
        ]
    },
    {
        value: 'zujian',
        label: '组件',
        children: [
            {
               value: 'layout',
               label: 'Layout 布局',
               children: []
            },
            {
               value: 'icon',
               label: 'Icon 图标',
               children: []
            }

         ]
     }
];

function render(arr) {
        for(let i = 0; i < arr.length; i++) {
             if(arr[i] && arr[i].children.length == 0) {
                  delete arr[i].children
             }
             if(arr[i].children && arr[i].children.length > 0) {
                    render(arr[i].children)
             }
        }
        return arr
}

console.log(render(tree))
//打印如下:
已经删除空的children 

 3. 根据id查询name

//递归赋值分组名称
    getGroupName (treeData, nodeId) {
      let nodeName = null
      let fn = function (data) {
        if (Array.isArray(data) && data.length > 0) {
          data.forEach((item) => {
            if (item.id === nodeId) {
              nodeName = item.label;
              return false;
            }
            if (item.children) {
              fn(item.children)
            }
          })
        }
      }
      fn(treeData)
      return nodeName
    }

console.log(getGroupName (arr,"1.3"))  //文件夹1-3