js扁平数据结构转Tree
无意间看到的一道题,实际业务有这种场景,就打开看了看,不过我们这种数据都是中台在处理,然后返回给前台的。
let arr = [
{ id: 1, name: "部门1", pid: 0 },
{ id: 2, name: "部门2", pid: 1 },
{ id: 3, name: "部门3", pid: 1 },
{ id: 4, name: "部门4", pid: 3 },
{ id: 5, name: "部门5", pid: 4 },
];
处理成这种树型结构:
在vue里面测的,懒得变js了,凑合凑合:
// 方式一:递归
arrayToTree(data, pid) {
const result = [];
this.getChildren(data, result, pid);
return result;
},
getChildren(data, result, pid) {
data.forEach((item, index) => {
if (item.pid === pid) {
const newItem = { ...item, children: [] };
result.push(newItem);
// ++index 不考虑id,单纯的分层
this.getChildren(data, newItem.children, ++index);
// item.id 需要pid和id是有关联关系的
//this.getChildren(data, newItem.children, item.id);
}
});
},
// 方法二:filter 前提是pid和id是有关联关系的。
arrayToTree3(arr) {
return arr.map((item) => {
item.children = arr.filter((val) => val.pid === item.id);
return item;
})[0];
},
评论区吵的很火热,可以围观围观:传送门