一、扁平转树形
思路 ( 递归方法 ):
1、申明一个Map对象,pid,outputObj三个变量
2、循环数组,取出每个对象对应的pid
3、判断对应的pid是否已经存在Map中,如果存在,判断childrens属性是否存在,不存在,创建一个childrens属性; 将当前对象克隆到一个新对象,加入到childrens中。并且,将当前对象的id加入到Map中(重点)
4、判断pid不在Map中存在,并且pid为0;创建一个新的对象,且将id存入Map中
//扁平数据结构
let data = [{id: 1, pid: 0, name: '沃尔玛'},
{id: 2, pid: 0, name: '生鲜区'},
{id: 3, pid: 1, name: '日用品区'},
{id: 4, pid: 2, name: '鱼'},
{id: 5, pid: 2, name: '牛肉'},
{id: 6, pid: 13, name: '卫生纸'},
{id: 7, pid: 3, name: '牙刷'},
{id: 8, pid: 7, name: '电动牙刷'},
{id: 9, pid: 7, name: '普通牙刷'}];
let TreeData = GetTreeData(data);
console.log(TreeData);
function GetTreeData(data) {
let TreeData = [];
let map = new Map(); //存在id,对应所在的内存地址
let outputObj, pid;
for (let i = 0; i < data.length; i++) {
pid = data[i].pid;
if (map.has(pid)) {
//存在,将些信息,加入到对应id=pid的对象上的children
if (!map.get(pid).childrens)
map.get(pid).childrens = [];
let obj = new Object(data[i]);
map.get(pid).childrens.push(obj);
//通过pid在Map中查找,并将当前对象,加入到对应的childres属性
map.set(data[i].id, obj);
//重点(必须也加入Map):将当前id及对应的对象,存入Map对象中
} else if (!map.has(pid) && pid == 0) {
//这里处理pid不存在,且pid 为0的处理,pid不存在,且不为0的,程序不考虑这种情况
outputObj = new Object(data[i]);
//加入到要返回的数组中
TreeData.push(outputObj);
//将id添加到Map中
map.set(data[i].id, outputObj);
}
}
return TreeData;
}
链接: 视频讲解 https://www.bilibili.com/video/BV1y5411n7EH/
二、树形转扁平
思路 ( 递归方法 ):
1、循环数组,取出每个对象进行判断
2、如果有children属性,将children传到flat函数重复执行,并将执行的结构返回数组,加入到新数组中。然后删除当前对象的childrens属性
3、不管是否有childrens属性,都要将当前对象解构,然后加入新数组中
let data = [{
id: 1, pid: 0, name: '沃尔玛', childrens: [
{
id: 2, pid: 1, name: '生鲜区', childrens: [
{id: 4, pid: 2, name: '鱼'},
{id: 5, pid: 2, name: '牛肉'}
]
},
{
id: 3, pid: 1, name: '日用品区', childrens: [
{id: 6, pid: 3, name: '卫生纸'},
{id: 7, pid: 3, name: '牙刷'}
]
}
]
}];
let flatArr = flat(data);
console.log(flatArr);
//递归
function flat(arr) {
let newArr = [];//申请新数组
for (let i = 0; i < arr.length; i++) {
if (arr[i].childrens) {//childrens存在
newArr.push(...flat(arr[i].childrens));
//递归,调用flat方法,并将返回结果push到新数组
delete arr[i].childrens;
}
newArr.push({...arr[i]});//三个点,展开对象,push新对象
}
return newArr;//返回数组
}