前言
当树形结构的层级越来越深时,操作某一节点会变得越来越费劲,维护成本不断增加。所以线性结构与树形的相互转换变得异常重要!
首先,我们约定树形结构如下:
node = {
id: number, // 数值
parentId: number, // 数值
name: string,
children: [] || null, // 用数组的方式保存子节点,适合更多业务场景
}
线性结构:
list = [
{ id: number, parentId: number, name: string },
{ id: number, parentId: number, name: string },
];
特殊情况
上面的树形结构并不是很完美,当遇到菜单或者分类等业务场景时,每个顶级节点的parentId约定为0,当存在多个顶级节点,显得不是一个完整的树。所以在这类特殊情况下,我们需要构造一个顶级节点。将菜单或者分类的原有顶级节点存储至该节点的children中。 所以最后约定顶级节点如下。
root = null || {
id: 0,
parentId: null,
children: [node1, node2, ...],
}
线性结构与树形结构相互转换
线性转树形:
function listConvertTree(list) {
let root = null;
if (list && list.length) {
root = { id: 0, parentId: null, children: [] };
const group = {};
for (let index = 0; index < list.length; index += 1) {
if (list[index].parentId !== null && list[index].parentId !== undefined) {
if (!group[list[index].parentId]) {
group[list[index].parentId] = [];
}
group[list[index].parentId].push(list[index]);
}
}
const queue = [];
queue.push(root);
while (queue.length) {
const node = queue.shift();
node.children = group[node.id] && group[node.id].length ? group[node.id] : null;
if (node.children) {
queue.push(...node.children);
}
}
}
return root;
}
树形转线性:
function treeConvertList(root) {
const list = [];
if (root) {
const Root = JSON.parse(JSON.stringify(root));
const queue = [];
queue.push(Root);
while (queue.length) {
const node = queue.shift();
if (node.children && node.children.length) {
queue.push(...node.children);
}
delete node.children;
if (node.parentId !== null && node.parentId !== undefined) {
list.push(node);
}
}
}
return list;
}
js实现树形数据转成扁平数据:
// 第一种写法
let res = [] // 用于存储递归结果(扁平数据)
// 递归函数
const fn = (source)=>{
source.forEach(el=>{
res.push(el)
el.children && el.children.length>0 ? fn(el.children) : "" // 子级递归
})
}
// 第二种写法
function fn(arr) {
let res = []
arr.forEach((item) => {
res.push(item)
if (item.children) {
res.push(...fn(item.children))
}
})
return res
}
// 树形数据
const arr = [
{ id: "1", rank: 1 },
{ id: "2", rank: 1,
children:[
{ id: "2.1", rank: 2 },
{ id: "2.2", rank: 2 }
]
},
{ id: "3", rank:1,
children:[
{ id: "3.1", rank:2,
children: [
{ id:'3.1.1', rank:3,
children:[
{ id: "3.1.1.1", rank: 4,
children:[
{ id: "3.1.1.1.1", rank: 5 }
]
}
]
}
]
}
]
}
]
fn(arr) // 执行递归函数
console.log(res) // 查看结果
结果: