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


Posted in Javascript onFebruary 27, 2020

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

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

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

  • 拥有一个唯一的id
  • 拥有一个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

算法思想:

先将数组中的每一个节点放到temp对象中(创建set)
即数组中有{id: '2-3', parent_id: '2',...}这样一个节点,需要将他放到temp中变成 '2-3': {id: '2-3', parent_id: '2',...}这种JSON结构

直接遍历整个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;
}

测试结果:

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

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

这个算法的效率是极高的,比多重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循环嵌套。嘿嘿嘿 

到此这篇关于javascript将扁平的数据转为树形结构的高效率算法的文章就介绍到这了,更多相关javascript 扁平数据转为树形结构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
Mar 01 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 #Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 #Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 #Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 #Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 #Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 #Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 #Javascript
You might like
PHP开发中四种查询返回结果分析
2011/01/02 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
PHP实现简单的计算器
2020/08/28 PHP
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
处理Python中的URLError异常的方法
2015/04/30 Python
python定时执行指定函数的方法
2015/05/27 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
三十年同学聚会致辞
2015/07/28 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js