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

在这里插入图片描述

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

文章目录

- 摘要：
- 引言：
- 正文：
- - 1. 扁平数据结构与树形结构
  - 2. 转换扁平数据到树形结构的函数
  - 3. 使用示例
- 总结
- 参考资料：

摘要：

本文将介绍如何将扁平数据结构转换为树形结构，并提供一个简单的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) }));
}

这个函数采用了递归的方法。它首先过滤出所有顶级节点（即父项为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 },// ...更多节点
]

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

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

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

[{ id: 1, name: '节点1', children: [{ id: 2, name: '节点2', children: [{ id: 4, name: '节点4' }] },{ id: 3, name: '节点3', children: [{ id: 5, name: '节点5' }] }] }// ...更多顶级节点
]