javascript将扁平的数据转为树形结构（高效率）

最新推荐文章于 2024-01-31 09:15:00 发布
置顶 最新推荐文章于 2024-01-31 09:15:00 发布
阅读量2.4w 收藏 38
点赞数 18
分类专栏： JS小技巧 算法 文章标签： javascript 优化 数组转树 菜单构建 结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37746973/article/details/78662177
版权

当我们需要将一个一维数组转换成一个多层结构的时候，最简单但是最慢的就是多个for循环嵌套，但是这样做有一些缺点，那就是效率太低、而且有多少层就需要嵌套几个for循环，不好用。

我实现了用O(n)级算法将 一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。

一位数组中每一个元素必须要包含以下属性：

  1. 拥有一个唯一的id
  2. 拥有一个parent_id, 这个id指向它父级的id

其他则为每一个元素中的一些信息，我这里是菜单，就有菜单的名称和url信息。

注：

  1. 在层级结构中，第一层的parent_id需要为0.
  2. 父节点在数组中的位置需要在子节点前，即 节点3必须排在节点3-2之前

扁平数组例：

var menu_list = [{
      id: '1',
      menu_name: '设置',
      menu_url: 'setting',
      parent_id: 0
    }, {
      id: '1-1',
      menu_name: '权限设置',
      menu_url: 'setting.permission',
      parent_id: '1'
    }, {
      id: '1-1-1',
      menu_name: '用户管理列表',
      menu_url: 'setting.permission.user_list',
      parent_id: '1-1'
    }, {
      id: '1-1-2',
      menu_name: '用户管理新增',
      menu_url: 'setting.permission.user_add',
      parent_id: '1-1'
    }, {
      id: '1-1-3',
      menu_name: '角色管理列表',
      menu_url: 'setting.permission.role_list',
      parent_id: '1-1'
    }, {
      id: '1-2',
      menu_name: '菜单设置',
      menu_url: 'setting.menu',
      parent_id: '1'
    }, {
      id: '1-2-1',
      menu_name: '菜单列表',
      menu_url: 'setting.menu.menu_list',
      parent_id: '1-2'
    }, {
      id: '1-2-2',
      menu_name: '菜单添加',
      menu_url: 'setting.menu.menu_add',
      parent_id: '1-2'
    }, {
      id: '2',
      menu_name: '订单',
      menu_url: 'order',
      parent_id: 0
    }, {
      id: '2-1',
      menu_name: '报单审核',
      menu_url: 'order.orderreview',
      parent_id: '2'
    }, {
      id: '2-2',
      menu_name: '退款管理',
      menu_url: 'order.refundmanagement',
      parent_id: '2'
    }
]

实现算法buildTree

算法思想：

  1. 先将数组中的每一个节点放到temp对象中（创建set）
    即数组中有{id: '2-3', parent_id: '2',...}这样一个节点，需要将他放到temp中变成 '2-3': {id: '2-3', parent_id: '2',...}这种JSON结构
  2. 直接遍历整个temp对象，通过这句代码   temp[temp[i].parent_id].children[temp[i].id] = temp[i];   将当前子节点与父节点建立连接。是因为我们保证了父节点一定在子节点前，那么当子节点出现的时候就直接可以用temp[temp[i].parent_id]来查找到父节点这个时候先父节点的children对象中添加一个引用即可。
/**
 * 将一维的扁平数组转换为多层级对象
 * @param  {[type]} list 一维数组，数组中每一个元素需包含id和parent_id两个属性 
 * @return {[type]} tree 多层级树状结构
 */
function buildTree(list){
	let temp = {};
	let tree = {};
	for(let i in list){
		temp[list[i].id] = list[i];
	}
	for(let i in temp){
		if(temp[i].parent_id) {
			if(!temp[temp[i].parent_id].children) {
				temp[temp[i].parent_id].children = new Object();
			}
			temp[temp[i].parent_id].children[temp[i].id] = temp[i];
		} else {
			tree[temp[i].id] =  temp[i];
		}
	}
	return tree;
}

测试结果：

可以看到函数成功地构建了多级的树状结构

 

这个算法的效率是极高的，比多重for循环来的好得多。

 

 

 

 

以下是测试数据，用时只需5毫秒左右：


var menu_list = [{
      id: '1',
      menu_name: '设置',
      menu_url: 'setting',
      parent_id: 0
    }, {
      id: '1-1',
      menu_name: '权限设置',
      menu_url: 'setting.permission',
      parent_id: '1'
    }, {
      id: '1-1-1',
      menu_name: '用户管理列表',
      menu_url: 'setting.permission.user_list',
      parent_id: '1-1'
    }, {
      id: '1-1-2',
      menu_name: '用户管理新增',
      menu_url: 'setting.permission.user_add',
      parent_id: '1-1'
    }, {
      id: '1-1-3',
      menu_name: '角色管理列表',
      menu_url: 'setting.permission.role_list',
      parent_id: '1-1'
    }, {
      id: '1-1-4',
      menu_name: '角色管理新增',
      menu_url: 'setting.permission.role_add',
      parent_id: '1-1'
    }, {
      id: '1-2',
      menu_name: '菜单设置',
      menu_url: 'setting.menu',
      parent_id: '1'
    }, {
      id: '1-2-1',
      menu_name: '菜单列表',
      menu_url: 'setting.menu.menu_list',
      parent_id: '1-2'
    }, {
      id: '1-2-2',
      menu_name: '菜单添加',
      menu_url: 'setting.menu.menu_add',
      parent_id: '1-2'
    }, {
      id: '2',
      menu_name: '订单',
      menu_url: 'order',
      parent_id: 0
    }, {
      id: '2-1',
      menu_name: '报单审核',
      menu_url: 'order.orderreview',
      parent_id: '2'
    }, {
      id: '2-2',
      menu_name: '退款管理',
      menu_url: 'order.refundmanagement',
      parent_id: '2'
    }, {
      id: '2-3',
      menu_name: '实物订单',
      menu_url: 'order.realorder',
      parent_id: '2'
    }, {
      id: '2-1-1',
      menu_name: '全部报单',
      menu_url: 'order.orderreview.all',
      parent_id: '2-1'
    }, {
      id: '2-2-1',
      menu_name: '所有记录',
      menu_url: 'order.refundmanagement.all',
      parent_id: '2-2'
    }, {
      id: '2-2-2',
      menu_name: '待处理',
      menu_url: 'order.refundmanagement.wait',
      parent_id: '2-2'
    }, {
      id: '2-2-3',
      menu_name: '退款原因',
      menu_url: 'order.refundmanagement.result',
      parent_id: '2-2'
    }, {
      id: '2-3-1',
      menu_name: '实物订单管理',
      menu_url: 'order.realorder.list',
      parent_id: '2-3'
    }, {
      id: '3',
      menu_name: '商品',
      menu_url: 'commodity',
      parent_id: 0
    }, {
      id: '3-1',
      menu_name: '分类管理',
      menu_url: 'commodity.classifieldmanagement',
      parent_id: '3'
    }, {
      id: '3-1-1',
      menu_name: '管理',
      menu_url: 'commodity.classifieldmanagement.management',
      parent_id: '3-1'
    }, {
      id: '3-1-2',
      menu_name: '编辑或新增',
      menu_url: 'commodity.classifieldmanagement.edit',
      parent_id: '3-1'
    }, {
      id: '3-2',
      menu_name: '品牌管理',
      menu_url: 'commodity.brandmanagement',
      parent_id: '3'
    }, {
      id: '3-2-1',
      menu_name: '管理',
      menu_url: 'commodity.brandmanagement.management',
      parent_id: '3-2'
    }, {
      id: '3-2-2',
      menu_name: '编辑或新增',
      menu_url: 'commodity.brandmanagement.edit',
      parent_id: '3-2'
    }, {
      id: '3-3',
      menu_name: '商品管理',
      menu_url: 'commodity.commoditymanagement',
      parent_id: '3'
    }, {
      id: '3-3-1',
      menu_name: '管理',
      menu_url: 'commodity.commoditymanagement.management',
      parent_id: '3-3'
    }, {
      id: '3-3-2',
      menu_name: '编辑或新增',
      menu_url: 'commodity.commoditymanagement.edit',
      parent_id: '3-3'
    }, {
      id: '3-4',
      menu_name: '类型管理',
      menu_url: 'commodity.typeManagement',
      parent_id: '3'
    }, {
      id: '3-4-1',
      menu_name: '管理',
      menu_url: 'commodity.typeManagement.management',
      parent_id: '3-4'
    }, {
      id: '3-4-2',
      menu_name: '编辑或新增',
      menu_url: 'commodity.typeManagement.edit',
      parent_id: '3-4'
    }];

这是我一个大二学生想出来的，挺开心的，因为当时看到老师用的3个for循环嵌套。嘿嘿嘿 

huyao_road
关注
  • 18
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
js中列表数据转树型结构
webcamds的博客
09-11 2075
话不多说，直接进入正题~ 列表数据中字段如下： [ { id: 1, text: '节点1', parentId: 0 //这里用0表示为顶级节点 }, { id: 2, text: '节点1_1', parentId: 1 //通过这个字段来确定子父级 } ... ] 我们预期的结果： [ { id: 1, text: '节
js将列表组装成树结构的两种方式
似月是你
08-24 725
js将列表组装成树结构的两种方式
把扁平化的数据转换成树形结构的JSON
08-12
把扁平化的数据转换成树形结构的JSON
使用jsTree实现js树形结构
06-07
例程可正常使用，非常的简单，基本上学过几天代码的人都能够正常使用。采用纯js编写，不复杂
聊一聊树形结构数据的转换-tree
最新发布
m0_61353839的博客
01-31 459
将数组转换为树结构，时间复杂度，空间复杂度，哈希表
js实现树形数据转成扁平数据的方法示例
10-15
主要介绍了js实现树形数据转成扁平数据的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript将扁平的数据转为树形结构的高效率算法.docx
01-13
javascript将扁平的数据转为树形结构的高效率算法.docx
javascript将扁平的数据转为树形结构的高效率算法
10-15
主要介绍了javascript将扁平的数据转为树形结构的高效率算法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript 将扁平的数组输出转为树形结构(需要考虑性能)
程邓楠的博客
02-27 2076
判断一个算法的好坏，一般从执行时间和占用空间来看,执行时间越短，占用的内存空间越小，那么它就是好的算法。对应的，我们常常用时间复杂度代表执行时间，空间复杂度代表占用的内存空间。
JavaScript树形数组扁平化/以及扁平化数组还原到树形数组
weixin_43811753的博客
03-06 2329
将树形数组扁平化或者把扁平化数组转换成树tree。场景：后端返回的数据处理，或者是传给后端的数据处理
前端js将扁平化数据转化为=菜单树
兰亭古墨
06-21 674
let menuList = [ { id: 1, pid: -1, name: '江西' }, { id: 2, pid: 1, name: '南昌' }, { id: 3, pid: 1, name: '九江' }, { id: 4, p...
js中列表与树形结构之间的转换及常见操作
oleiwoaboluo的博客
04-20 917
【代码】js中列表与树形结构之间的转换及常见操作。
js扁平数据转树形结构数据
李十三的博客
08-08 439
【代码】js扁平数据转树形结构数据。
js实现扁平数据转化成树结构数据
weixin_46996561的博客
09-01 57
【代码】js实现扁平数据转化成树结构数据。
算法：扁平数据结构转tree（JavaScript版）
qq_36647492的博客
11-18 1682
前两天看了一篇文章，提到了一道算法，扁平数据结构转成tree，然后尝试写了一下。 // 源数据 let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id: 3, name: '部门3', pid: 1}, {id: 4, name: '部门4', pid: 3}, {id: 5, name: '部门5', pid: 4}, ] // 输出结果 [ ...
javascript 一个简单的列表结构转树状结构方法
qqRZL的博客
05-22 945
用JS代码写一个将结构[{id:1},{id:2, pid: 1},{id:3, pid: 2}]转换成[{id:1, children:[{id:2, pid: 1, children: [{id:3, pid: 2}] }] }]的方法
JavaScript将扁平数据转换为树形结构
qq_45701130的博客
03-26 2637
将一组扁平数据转换为树形的层级结构 <script> // 将扁平数据转换为树形结构 function test(arr) { // 将对象id和temp数组的下标对应起来 // 这样可以根据id准确找到某个对象 let temp = []; for (let key of arr) { temp[key.id] = key; } //保存树形结构 let res
JavaScript 扁平化数组转成Tree
weixin_46823798的博客
09-24 1150
扁平化数组转成Tree以及数组扁平化的常用方法
js 将数组列表转为树结构
波客
01-08 2620
let list = [ { id: '1', title: '节点1', parentId: '', }, { id: '1-1', title: '节点1-1', parentId: '1' }, { id: '1-2', title: '节点1-2', parentId: '1' ...
扁平化数据转换树形结构
03-31
扁平化数据指的是将具有层级关系的数据展开成一维结构，而树形结构则是将具有层级关系的数据呈现为树状图。因此，将扁平化数据转换成树形结构需要进行一些处理。 以下是一个示例数据： ```json [ { "id": 1, "name": "节点1", "parentId": null }, { "id": 2, "name": "节点2", "parentId": 1 }, { "id": 3, "name": "节点3", "parentId": 2 }, { "id": 4, "name": "节点4", "parentId": 2 }, { "id": 5, "name": "节点5", "parentId": 1 }, { "id": 6, "name": "节点6", "parentId": 5 } ] ``` 其中，每个对象表示一个节点，`id`表示节点的唯一标识，`name`表示节点的名称，`parentId`表示节点的父节点标识。其中，根节点的`parentId`为`null`。 现在要将这个扁平化数据转换成树形结构，可以按照以下步骤进行： 1. 创建一个空的树形结构对象 2. 遍历扁平化数据，将每个节点加入树形结构中 3. 对于每个节点，如果它是根节点，则直接加入树形结构对象的`children`属性中，否则需要将它加入它的父节点的`children`属性中 以下是使用JavaScript实现的代码： ```javascript function flatToTree(flatData) { const tree = {}; const map = {}; for (const node of flatData) { const id = node.id; const parentId = node.parentId; if (!map[id]) { map[id] = { children: [] }; } map[id].id = id; map[id].name = node.name; if (parentId === null) { tree[id] = map[id]; } else { if (!map[parentId]) { map[parentId] = { children: [] }; } map[parentId].children.push(map[id]); } } return Object.values(tree); } ``` 使用该函数对示例数据进行转换，可以得到如下结果： ```json [ { "id": 1, "name": "节点1", "children": [ { "id": 2, "name": "节点2", "children": [ { "id": 3, "name": "节点3", "children": [] }, { "id": 4, "name": "节点4", "children": [] } ] }, { "id": 5, "name": "节点5", "children": [ { "id": 6, "name": "节点6", "children": [] } ] } ] } ] ``` 可以看到，该函数将扁平化数据成功转换成了树形结构。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值