在前端开发中,我们经常会遇到将数组对象转换为树结构的需求,尤其是在处理大量数据的情况下。本文将介绍如何使用 JavaScript 实现数组对象转树结构,并提供详细的示例代码。
为什么需要数组对象转树结构?
当我们从后端获取到的数据是扁平化的数组对象的时候,往往需要将其转换为树状结构,以便于在前端进行展示和操作。例如,我们从后端获取到了以下数据:
const data = [
{ id: 1, name: 'A', parentId: null },
{ id: 2, name: 'B', parentId: null },
{ id: 3, name: 'A1', parentId: 1 },
{ id: 4, name: 'A2', parentId: 1 },
{ id: 5, name: 'B1', parentId: 2 },
{ id: 6, name: 'B2', parentId: 2 },
{ id: 7, name: 'A1-1', parentId: 3 },
{ id: 8, name: 'A1-2', parentId: 3 },
];
我们希望将上面的数据转换为以下树状结构:
- A
- A1
- A1-1
- A1-2
- A2
- B
- B1
- B2
这样的树状结构对于展示和操作数据是非常方便的。接下来,我们将介绍如何使用 JavaScript 实现这个转换过程。
实现数组对象转树结构的函数
下面是一个用于将数组对象转换为树状结构的函数的实现:
function arrayToTree(array) {
const root = { id: null, children: [] };
const map = {};
array.forEach(item => {
map[item.id] = { ...item, children: [] };
});
array.forEach(item => {
if (item.parentId === null) {
root.children.push(map[item.id]);
} else {
map[item.parentId].children.push(map[item.id]);
}
});
return root.children;
}
以上函数的思路是先通过遍历数组创建了一个映射表 map
,以 id
作为键,将数组对象转换为一个以 id
为属性的对象,并将其子节点初始化为空数组。然后再次遍历数组,根据每个对象的 parentId
将其放入对应父节点的 children
数组中。最后返回根节点的子节点数组即可。
使用示例
我们来使用上面的函数将之前提到的示例数据转换为树状结构:
const data = [
{ id: 1, name: 'A', parentId: null },
{ id: 2, name: 'B', parentId: null },
{ id: 3, name: 'A1', parentId: 1 },
{ id: 4, name: 'A2', parentId: 1 },
{ id: 5, name: 'B1', parentId: 2 },
{ id: 6, name: 'B2', parentId: 2 },
{ id: 7, name: 'A1-1', parentId: 3 },
{ id: 8, name: 'A1-2', parentId: 3 },
];
const tree = arrayToTree(data);
console.log(tree);
运行上述代码将会得到如下输出:
[
{
"id": 1,
"name": "A",
"parentId": null,
"children": [
{
"id": 3,
"name": "A1",
"parentId": 1,
"children": [
{
"id": 7,
"name": "A1-1",
"parentId": 3,
"children": []
},
{
"id": 8,
"name": "A1-2",
"parentId": 3,
"children": []
}
]
},
{
"id": 4,
"name": "A2",
"parentId": 1,
"children": []
}
]
},
{
"id": 2,
"name": "B",
"parentId": null,
"children": [
{
"id": 5,
"name": "B1",
"parentId": 2,
"children": []
},
{
"id": 6,
"name": "B2",
"parentId": 2,
"children": []
}
]
}
]
输出结果即为我们所期望的树状结构。
总结
通过上述的示例代码,我们可以轻松地将数组对象转换为树结构,并方便地在前端进行展示和操作。这在项目中处理复杂的数据结构时非常有用。希望本文对你有所帮助,如果有任何问题,欢迎留言讨论!
本文来自极简博客,作者:时光隧道喵,转载请注明原文链接:JavaScript 数组对象转树结构