一、扁平转树形
在 JavaScript 中,可以使用递归算法将扁平的数据转换为树形结构。
扁平数据通常是一个带有 parentId 属性的数组,而树形结构通常是一个带有 children 属性的对象。
下面是一个简单的例子,它演示了如何将扁平数组转换为树形对象:
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: '普通牙刷' }
];
function convertToTree(flatData) {
let treeData = [];
let map = new Map();
let outputObj, pid;
for (let i = 0; i < flatData.length; i++) {
pid = flatData[i].pid;
if (map.has(pid)) {
if (!map.get(pid).childrens)
map.get(pid).childrens = [];
let obj = new Object(flatData[i]);
map.get(pid).childrens.push(obj);
map.set(flatData[i].id, obj);
} else if (!map.has(pid) && pid == 0) {
outputObj = new Object(flatData[i]);
treeData.push(outputObj);
map.set(flatData[i].id, outputObj);
}
}
return treeData;
}
let TreeData = convertToTree(data);
console.log(TreeData);
二、树形转扁平
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: '牙刷' }
]
}
]
}];
function convertToFlat(treeData) {
let flatData = [];
for (let i = 0; i < treeData.length; i++) {
if (treeData[i].childrens) {
flatData.push(...convertToFlat(treeData[i].childrens));
delete treeData[i].childrens;
}
flatData.push({ ...treeData[i] });
}
return flatData;
}
let flatData = convertToFlat(data);
console.log(flatData);