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

本文探讨如何高效地将二维数组转化为树形结构,对比了两种方案:方案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'=
### 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、付费专栏及课程。

余额充值