扁平数据转树形结构，让数据管理更清晰

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将介绍如何将扁平数据结构转换为树形结构，并提供一个简单的JavaScript函数实现这一转换。

引言：

在数据处理中，我们经常遇到需要将扁平数据结构转换为树形结构的情况。例如，在组织架构、文件系统或者菜单管理等场景中，树形结构可以更清晰地表示层级关系和分类。本文将介绍一种简单的方法来实现这一转换，并附上JavaScript函数示例。

正文：

1. 扁平数据结构与树形结构

扁平数据结构是指所有数据项处于同一层级，没有子项和父项关系的结构。而树形结构是一种层次化的数据结构，其中每个数据项都可以有多个子项，这些子项也可以有自己的子项，形成一个类似于树状的层级关系。

2. 转换扁平数据到树形结构的函数

要实现扁平数据到树形结构的转换，我们可以定义一个函数，该函数接收扁平数据作为输入，并返回相应的树形结构。

以下是一个简单的JavaScript示例函数：

function flattenToTree(flatData, parentId = null) {
  return flatData
    .filter(item => item.parentId === parentId)
    .map(item => ({ ...item, children: flattenToTree(flatData, item.id) }));
}
1
2
3
4
5

这个函数采用了递归的方法。它首先过滤出所有顶级节点（即父项为null的节点），然后对每个节点进行递归处理，直到所有节点都被转换成树形结构。

3. 使用示例

假设我们有一个扁平的数据结构如下：

[
  { id: 1, name: '节点1', parentId: null },
  { id: 2, name: '节点2', parentId: 1 },
  { id: 3, name: '节点3', parentId: 1 },
  { id: 4, name: '节点4', parentId: 2 },
  { id: 5, name: '节点5', parentId: 2 },
  // ...更多节点
]
1
2
3
4
5
6
7
8

我们可以调用flattenToTree函数，将这个扁平数据转换为树形结构：

const treeData = flattenToTree(flatData);
console.log(treeData);
1
2

转换后的树形结构将如下所示：

[
  { id: 1, name: '节点1', children: [
    { id: 2, name: '节点2', children: [
      { id: 4, name: '节点4' }
    ] },
    { id: 3, name: '节点3', children: [
      { id: 5, name: '节点5' }
    ] }
  ] }
  // ...更多顶级节点
]
1
2
3
4
5
6
7
8
9
10
11

总结

通过定义一个递归函数，我们可以轻松地将扁平数据结构转换为树形结构。这种转换对于需要表示层级关系和分类的场景非常有用。在实际应用中，你可以根据具体需求调整这个函数，以适应不同的数据结构和转换需求。

参考资料：

• 理解JavaScript中的递归函数
• 如何将扁平数据转换为树形结构

🌟 扁平数据转树形结构，让数据管理更清晰！🌟