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 

?

轉載于:https://www.cnblogs.com/zhaozhenzhen/p/10972931.html

總結

以上是生活随笔為你收集整理的js 递归总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。