JavaScript 实现树形结构和一维数组互相转换
背景
树形结构和一维数组是开发中很容易碰到的情况，也是面试中很容易碰到的手撕题目
实现
一、一维数组转树形结构
FROM
const source = [
{ id: 1, name: "张三", pid: 0 },
{ id: 2, name: "李四", pid: 1 },
{ id: 3, name: "王五", pid: 2 },
{ id: 4, name: "赵六", pid: 3 },
{ id: 5, name: "陈七", pid: 4 },
{ id: 6, name: "谢八", pid: 4 },
{ id: 7, name: "林一", pid: 1 },
{ id: 8, name: "杨二", pid: 3 },
];
TO
[
{
"id": 1,
"name": "张三",
"pid": 0,
"children": [
{
"id": 2,
"name": "李四",
"pid": 1,
"children": [
{
"id": 3,
"name": "王五",
"pid": 2,
"children": [
{
"id": 4,
"name": "赵六",
"pid": 3,
"children": [
{
"id": 5,
"name": "陈七",
"pid": 4
},
{
"id": 6,
"name": "谢八",
"pid": 4
}
]
},
{
"id": 8,
"name": "杨二",
"pid": 3
}
]
}
]
},
{
"id": 7,
"name": "林一",
"pid": 1
}
]
}
]
迭代实现
const buildTree = (root) => {
const hash = {};
const tree = [];
root.forEach((node) => {
hash[node.id] = node;
});
root.forEach((node) => {
const parent = hash[node.pid];
if (parent) {
(parent.children || (parent.children = [])).push(node);
} else {
tree.push(hash[node.id]);
}
});
return tree;
}
const tree = buildTree(source);
console.log(JSON.stringify(tree, null, 2));
递归实现
const buildTree = (root, pid = 0) => {
const tree = [];
for (const node of root) {
if (node.pid === pid) {
const children = buildTree(root, node.id);
if (children.length) {
node.children = children;
}
tree.push(node);
}
}
return tree;
};
const tree = buildTree(source);
console.log(JSON.stringify(tree, null, 2));
二、树形结构拍平
// 展平树状数组
const node = {
id: 0,
parentId: null,
name: "生物",
children: [
{
id: 1,
parentId: 0,
name: "动物",
children: [
{
id: 4,
parentId: 1,
name: "哺乳动物",
children: [
{
id: 8,
parentId: 4,
name: "大象",
},
{
id: 9,
parentId: 4,
name: "海豚",
},
{
id: 10,
parentId: 4,
name: "猩猩",
},
],
},
{
id: 5,
parentId: 1,
name: "卵生动物",
children: [
{
id: 11,
parentId: 5,
name: "蟒蛇",
},
{
id: 12,
parentId: 5,
name: "麻雀",
},
],
},
],
},
{
id: 2,
parentId: 0,
name: "植物",
children: [
{
id: 6,
parentId: 2,
name: "种子植物",
children: [
{
id: 111,
parentId: 6,
name: "种子植物的孩子1",
},
{
id: 112,
parentId: 6,
name: "种子植物的孩子2",
},
],
},
{
id: 7,
parentId: 2,
name: "蕨类植物",
},
],
},
{
id: 3,
parentId: 0,
name: "微生物",
},
],
};
// 展平
[
{ id: 0, parentId: null, name: "生物" },
{ id: 1, parentId: 0, name: "动物" },
{ id: 2, parentId: 0, name: "植物" },
{ id: 3, parentId: 0, name: "微生物" },
{ id: 4, parentId: 1, name: "哺乳动物" },
{ id: 5, parentId: 1, name: "卵生动物" },
{ id: 6, parentId: 2, name: "种子植物" },
{ id: 7, parentId: 2, name: "蕨类植物" },
{ id: 8, parentId: 4, name: "大象" },
{ id: 9, parentId: 4, name: "海豚" },
{ id: 10, parentId: 4, name: "猩猩" },
{ id: 11, parentId: 5, name: "蟒蛇" },
{ id: 12, parentId: 5, name: "麻雀" },
{ id: 111, parentId: 6, name: "种子植物的孩子1" },
{ id: 112, parentId: 6, name: "种子植物的孩子2" },
];
const treeToFlat = (root) => {
let res = [];
let queue = [root];
while (queue.length) {
const node = queue.shift();
res.push({
id: node.id,
parentId: node.parentId,
name: node.name,
});
if (node.children) {
for (const child of node.children) {
queue.push(child);
}
}
}
return res;
};
console.log(treeToFlat(node));