如何快速高效的将数组转换成树形结构

最新推荐文章于 2024-07-19 13:54:51 发布
最新推荐文章于 2024-07-19 13:54:51 发布
阅读量1.1w 收藏 10
点赞数
CC 4.0 BY-SA版权
分类专栏： PHP 文章标签： PHP 数组 树形结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaolong_web/article/details/86667213
本文探讨如何高效地将二维数组转化为树形结构，对比了两种方案：方案1采用全量遍历导致N^2的时间复杂度，而方案2通过限制递归范围降低到Nx2。测试结果显示，尽管方案2仍使用递归，但在5000个数据的100次执行中，其时间和内存效率优于方案1。文章提出了对于大数据量场景下，寻找更优解决方案的需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

任何无限极分类都会涉及到创建一个树状层级数组。从顶级分类递归查找子分类，最终构建一个树状数组。如果分类数据是一个数组配置文件，且子类父类id没有明确的大小关系。那么我们如何高效的从一个二维数组中构建我们所需要的树状结构呢。

假设数据源如下:


return [
	['id'=>1,'name'=>'文章','parent_id'=>0],
	['id'=>2,'name'=>'页面','parent_id'=>0],
	['id'=>3,'name'=>'娱乐','parent_id'=>1],
	['id'=>4,'name'=>'国内','parent_id'=>1],
	['id'=>5,'name'=>'海外','parent_id'=
最低0.47元/天 解锁文章

200万优质内容无限畅学
数组转树形结构
alfred____的博客
04-26 481
场景: 如果想使用组件库的树形结构就要用人家规定的数据结构,而后端返回的不是这种数据结构,所以就需要我们手动进行转换 例如: let arr = [{ id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIlead
把扁平化的数据转换成树形结构的JSON，把树形JSON扁平化.zip
06-17
例如，从扁平化的数据转换成树形结构的JSON，以及将树形JSON再扁平化，这两个过程在数据处理、数据库操作和前端展示等方面都有广泛的应用。 标题和描述提及的"把扁平化的数据转换成树形结构的JSON，把树形JSON扁平...
js数组转换成tree结构数组
08-22
js数组转换成tree结构数组算法
如何快速实现数组转树
m0_59006402的博客
06-29 463
utils (项目的工具文件) export function tranListToTreeData(list) { // 最终要产出的树状数据的数组 const treeList = [] // 所有项都使用对象存储起来 const map = {} // 建立一个映射关系：通过id快速找到对应的元素 list.forEach(item => { if (!item.children) { item.children = [] } m
数组转换成树形结构
皓皓的博客
03-23 4257
实现一个方法，把原始数组转换成树形结构，要求尽可能降低时间复杂度 以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个方法，把原始数据转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下： // 原始数据如下 let data =[ {id:1,name:'部门A',parentId:0}, {id:2,name:'部门B',parentId:0}, {id:
数组转树状结构
greed
08-31 934
数组转树状结构 数组的原始结构 const data = [ { id: '01', name: '张大大', pid: '', job: '项目经理' }, { id: '02', name: '小亮', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马', pid: '01', j
Java 将有父子关系的数据转换成树形结构数据
01-07
一、数据库父子结构数据设计  大部分采用 parentId的形式来存储父id，并且只存储父id，祖父Id不存储。也可以添加存储层级级别或者层级关系等字段。 CREATE TABLE `t_resource` ( `id` varchar(255) NOT NULL ...
js 实现 list转换成tree的方法示例（数组到树）
12-02
为了将这个数组转换为树形结构，我们可以采用双重遍历的策略。第一遍遍历是为了找到每个节点的父节点，第二遍遍历是为了构建子节点数组。 下面是实现这个转换的函数`listToTree`： ```javascript function ...
将数组数据转化成树形结构
weixin_63473024的博客
03-26 4724
将数组数据转化成树形结构以便于操作带有层级的下拉选项 数据结构 观察相对应的结构 要将列表型的数据转化成树形数据，需要用到递归算法 思路 找树形结构的字段 id pid比较合适 再发现 没有子节点的pid为空 有子节点的 pid 是父节点的id 例如 当id=1 pid='' id=2 pid=1 也就是id=1的下面有子节点, id=3 pid=2 id=2下面有子节点 甚至id=4 pid=2 也就是有节点 上重点 ...
将数组转化为树状结构
m0_56895352的博客
02-25 1568
第四个参数：代表回调函数，回调函数一般用来处理数据，所以传递的是map集合存储的一项数据作为参数传入，这个后面会有事例。这是我写的一个通用的处理方式，arrayToTree就是主要处理的函数，而loopTree则是递归函数。第六个参数：代表回调函数处理了新数据的pid的key（依据key是否变化）1.数组顺序是乱的，防止处理时有遗漏，需要将第一层级数据先放到数组的前面。第五个参数：代表回调函数处理了新数据的id的key（依据key是否变化）第三个参数：代表数组中每一项的pid(父类id)的key。
数组转为树形结构
Grey的博客
10-20 3262
<script> /** * 把平铺的数组结构转成树形结构 */ const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': ..
将普通数组转成树形结构
qq_43648126的博客
07-19 1570
递归方法通常直观且易于理解，但在处理大量数据时可能会有性能上的挑战，可能面临堆栈溢出或性能问题。迭代方法和使用 Map 的方法通常可以提供更好的性能，特别是在数据量较大或层级较深的情况下，通常更适合处理大数据量和层级深的情况。选择合适的方法可以根据实际需求进行权衡和调整。DFS适合递归实现，BFS适合迭代实现。选择取决于数据结构和需求，例如是否需要按层级构建树。
数组数据转化成树形结构的两种方法（使用reduce函数或者使用递归算法）
qq_43710066的博客
04-20 1998
数组数据转化成树形结构的两种方法:使用reduce函数处理树形结构以及使用递归处理树形结构
将数组转化为tree结构
weixin_56132330的博客
03-07 2504
学习笔记
普通数组转成树状数组(树形结构)详解(数组扁平化)
DavisCZ的博客
06-28 5320
普通数组转树形结构数组
vue中将数组数据转化成树形结构
最新发布
03-04
### Vue 实现数组转树形结构 在 Vue 项目中，可以创建一个方法来将扁平化的数组转换成树形结构的数据。此过程涉及遍历原始数组并构建父子关系。 对于给定的节点列表，假设每个对象都有 `id` 和 `parentId` 属性用于表示唯一标识符及其父级关联[^1]： ```javascript function arrayToTree(data, rootId = null) { const treeData = []; // 创建映射表提高查找效率 const idMap = new Map(); data.forEach(item => { item.children = []; idMap.set(item.id, item); }); data.forEach(item => { if (item.parentId === rootId || !rootId && !item.parentId) { treeData.push(item); } else { let parentItem = idMap.get(item.parentId); if (parentItem) { parentItem.children.push(item); } } }); return treeData; } ``` 为了使该函数适用于 Vue 组件内部，在 methods 或 computed 中定义上述逻辑，并确保传入的数据已经过适当处理以便于展示[^2]。 当需要渲染这些嵌套结构时，可以通过递归组件的方式轻松完成视图层面上的表现。下面是一个简单的例子说明如何利用这个工具函数以及相应的模板代码片段[^3]: ```vue <template> <ul> <li v-for="node in nodes" :key="node.id"> {{ node.name }} <tree-view v-if="node.children.length" :nodes="node.children"></tree-view> </li> </ul> </template> <script> export default { name: 'TreeView', props: ['nodes'], }; </script> ``` 通过这种方式可以在前端高效地呈现具有层次感的信息架构，同时也保持了良好的可维护性和扩展性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值