实现数组转化成树

最新推荐文章于 2024-07-19 13:54:51 发布
最新推荐文章于 2024-07-19 13:54:51 发布
阅读量270 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46185369/article/details/120615239
版权

后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构：

在这里插入图片描述
这样的数据可以直接在table中使用，但是不能直接在tree组件中使用，需要我们做一些转换。
实现代码：在这里插入图片描述
总结：

1.判断元素是否为数组

2.浅拷贝数组 存为key:value的格式

3.根据原数组的id判断新数组是否有根节点

其中难点就在于 你需要判断元素是否有根节点 如果有就找到根节点的那个元素 然后将子节点的元素进行push 如果false说明当前元素已经是根节点了 不需要做任何操作

喜欢读书的三金
关注
数组转树方法（v起来）
weixin_57519185的博客
10-27 2480
一 ，为什么需要数组转树： 当我们做后台管理系统时难免会遇到关于公司组织架构这样的模块，一个部门下会有好几个小部门，这时我们就可以运用树形图来更好地进行查看，下面简单举例。 展开前： 展开后： 二，下面使用两种方法进行数组转树： 1. 非递归方式： /** * 把平铺的数组结构转成树形结构 * * [ * { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '...
数组转换成树
麦呢头冷的博客
10-21 738
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", job: "技术leade...
如何快速实现数组转树
m0_59006402的博客
06-29 416
utils (项目的工具文件) export function tranListToTreeData(list) { // 最终要产出的树状数据的数组 const treeList = [] // 所有项都使用对象存储起来 const map = {} // 建立一个映射关系：通过id快速找到对应的元素 list.forEach(item => { if (!item.children) { item.children = [] } m
将普通数组转成树形结构
最新发布
qq_43648126的博客
07-19 724
递归方法通常直观且易于理解，但在处理大量数据时可能会有性能上的挑战，可能面临堆栈溢出或性能问题。迭代方法和使用 Map 的方法通常可以提供更好的性能，特别是在数据量较大或层级较深的情况下，通常更适合处理大数据量和层级深的情况。选择合适的方法可以根据实际需求进行权衡和调整。DFS适合递归实现，BFS适合迭代实现。选择取决于数据结构和需求，例如是否需要按层级构建树。
数组转化成树
m0_60823684的博客
10-04 187
一.需求: 后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构： 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", job: "技术lea...
数组转成树
JINGinC的博客
10-26 299
普通方法： // 数组转换为树形的函数 export function tranListToTreeData(list) { // 最终要产出的树状数据的数组 const treeList = [] // 所有项都使用对象存储起来 const map = {} // 建立一个映射关系：通过id快速找到对应的元素 list.forEach(item => { if (!item.children) { item.children = []
数组转成树状结构
weixin_56847152的博客
08-13 450
hello 今天我来记录一下 数组转成树状结构 应用场景: 假如呢后端给我们返回一个平铺的数据 而结构要求的是树状 我们就可以用这套思维来完成咯~ 分析: 上下级 [ {id:"01", pid:"", "name":"老王" }, {id:"02", pid:"01", "name":"小张" }, {id:"03", pid:"02", "name":"小小张" }, {id:"04", pid:"", "name":"老陈" } ] ...
Js中将树形结构的数组转换成树结构方法
小生不才
08-05 614
常常在项目开发中使用到树形组件，那么自然离不开树型数据处理的能力。
js将数组转化成树型数据（必会技能）
ADwblj的博客
12-27 1583
如何将平铺的数组转化成树型数据
数组转换为树
weixin_33712987的博客
08-24 499
foreach ($lists as $item) { if (isset($lists[$item['parent_id']])) { $lists[$item['parent_id']]['children'][] = &$lists[$item[$key]]; } else { $result[]...
普通数组转化为树
alwaysrestless的博客
06-30 138
最近工作上遇到一个需要把普通数组转化为树的情况项目使用kendoUI,使用到了他的treeView组件，格式上需要树结构，但是后端数据是普通数组。 两种解决思路一种是利用map存储，一种就是单纯的遍历寻找parentId===id直接上代码： 另一种：......
数组转换树
weixin_55690518的博客
08-05 131
什么是树形数据 有一些业务场景在描述主体关系的时候必须使用树形数据，比如：我们常见的家庭成员关系图，公司里的组织架构等，要描述这样的业务场景，与之对应的，我们就得给出树形结构的数据 有时候，后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构： data = [ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"..
数组 转换为 树结构
m0_37711659的博客
06-13 793
// 初始数组 $arr = [ ['id'=>1,'pid'=>0,'name'=>'a'], ['id'=>2,'pid'=>1,'name'=>'b'], ['id'=>3,'pid'=>1,'name'=>'c'], ['id'=>4,'pid'=>2,'name'=>'d'], ...
对象数组转为树结构
weixin_34014555的博客
04-22 3328
在平时的业务中，相信我们一定都遇到过需要将后台传过来的一维数组转为树结构。 var arr = [ { id: 1, pid: -1, }, { id: 2, pid: -1, }, { id: 3, pid: -1, }, { id: 4, pid: 1, }, { id: 5, pid: 2, }, { id: 6, pid: 3, }, { id: 7, pid:...
数组转树,树转数组攻略大全
m0_56896206的博客
11-09 265
数组转树,树转数组攻略大全 let list = [ //数据结构 { pid: null, id: 1, serialNumber: '1', }, { pid: 1, id: 11, serialNumber: '1', }, { pid: 11,
将数组的列表结构转成树结构
文摘资讯
03-05 564
感觉每天都带着口罩上班好奇怪哈哈！！他们带我也带在后端返回的数据式中，以以下格式存储信息是相当普遍的，尤其是在存在一对多父/子节点关系的情况下：const data = [ { id:...
javaScript将数组转换成树
05-27
可以使用递归来将数组转换为树形结构。假设数组中每个元素都是一个具有 `id` 和 `parentId` 属性的对象，其中 `id` 表示该节点的唯一标识符，`parentId` 表示该节点的父节点的标识符，根节点的 `parentId` 为 `null`。 以下是一个示例函数来将数组转换为树形结构： ```javascript function arrayToTree(arr) { const map = {}; const roots = []; // First pass: create a map of nodes keyed by their id arr.forEach(node => { map[node.id] = node; node.children = []; }); // Second pass: link each node to its parent arr.forEach(node => { const parent = map[node.parentId]; if (parent) { parent.children.push(node); } else { roots.push(node); } }); return roots; } ``` 使用示例： ```javascript const arr = [ {id: 1, parentId: null}, {id: 2, parentId: 1}, {id: 3, parentId: 1}, {id: 4, parentId: 2}, {id: 5, parentId: 2}, {id: 6, parentId: 3}, {id: 7, parentId: 3}, ]; const tree = arrayToTree(arr); console.log(tree); ``` 输出结果： ``` [ { "id": 1, "parentId": null, "children": [ { "id": 2, "parentId": 1, "children": [ {"id": 4, "parentId": 2, "children": []}, {"id": 5, "parentId": 2, "children": []} ] }, { "id": 3, "parentId": 1, "children": [ {"id": 6, "parentId": 3, "children": []}, {"id": 7, "parentId": 3, "children": []} ] } ] } ] ``` 这个函数的时间复杂度是 $O(n)$，其中 $n$ 是数组的长度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值