当前位置: 首页 > Web前端 > JavaScript

将数组格式化为树结构

时间:2023-03-27 11:47:00 JavaScript

//原始数据letdataSource=[{id:1,pid:0,name:'一级菜单A'},{id:2,pid:0,name:'一级菜单B'},{id:3,pid:0,name:'一级菜单C'},{id:4,pid:1,name:'二级菜单A-A'},{id:5,pid:1,name:'二级-一级菜单A-B'},{id:6,pid:2,name:'二级菜单B-B'},{id:7,pid:2,name:'二级菜单B-C'},{id:8,pid:6,name:'三级菜单B-B-A'},{id:9,pid:6,name:'三级菜单B-B-B'},];/***[将数组格式化成树状结构]*@param{[type]}dataSource[原始数据]*@param{[type]}id_key[主键]*@param{[type]}parrentId_key[父键]*@return{[type]}[格式化树数据]*/constformatTreeData=(dataSource,id_key,parrentId_key)=>{//深拷贝一份,如果不想用lodash,可以用其他方法//深拷贝是为了避免改变原数组,如果你不介意,你可以直接使用它//constdata=lodash.cloneDeep(dataSource);常量数据=JSON.parse(JSON.stringify(dataSource));data.forEach(i=>i.children=data.filter(j=>j[parrentId_key]===i[id_key]));返回data.filter(i=>!data.find(j=>i[parrentId_key]===j[id_key]));};constres=formatTreeData(dataSource,"id","pid");//res---->[>{>"id":1,>"pid":0,>"name":"一级menuA",>"children":[>{>"id":4,>"pid":1,>"name":"二级菜单A-A",>"children":[]>},>{>"id":5,>"pid":1,>"name":"二级菜单A-B",>"children":[]>}>]>},>{>"id":2,>"pid":0,>"name":"一级菜单B",>"children":[>{>"id":6,>"pid":2,>"name":"二级菜单B-B",>"children":[>{>"id":8,>"pid":6,>"name":"三级菜单B-B-A",>"children":[]>},>{>"id":9,>"pid":6,>"name":"三级菜单B-B-B",>"children":[]>}>]>},>{>"id":7,>"pid":2,>"name":"二级菜单B-C",>"children":[]>}>]>},>{>"id":3,>"pid":0,>"name":"一级菜单C",>"children":[]>}>]