树形结构的数据与一维数组数据的相互转换

在我们做项目时，我们有时需要树形结构的数据进行数据的树形层级展示，或者需要把返回的数据结构数据进行拆解成单层数组形式。下面我们就来总结下这两种方法。

数组转树形结构：

var data = [{"id":2,"name":"第一级1","pid":0},{"id":3,"name":"第二级1","pid":2},{"id":5,"name":"第三级1","pid":4},{"id":100,"name":"第三级2","pid":3},{"id":6,"name":"第三级2","pid":3},{"id":601,"name":"第三级2","pid":6},{"id":602,"name":"第三级2","pid":6},{"id":603,"name":"第三级2","pid":6}];
// 数组转树形结构数据（原理即为通过设置id为key值，再通过pid去找这个key是否一样，一样则为这数据的子级数据）function arrayToJson(treeArray){var r = [];var tmpMap ={};for (var i=0, l=treeArray.length; i<l; i++) {// 以每条数据的id作为obj的key值，数据作为value值存入到一个临时对象里面tmpMap[treeArray[i]["id"]]= treeArray[i]; } console.log('tmpMap',tmpMap)for (i=0, l=treeArray.length; i<l; i++) {var key=tmpMap[treeArray[i]["pid"]];console.log('key',key)//循环每一条数据的pid，假如这个临时对象有这个key值，就代表这个key对应的数据有children，需要Push进去//如果这一项数据属于哪个数据的子级if (key) {// 如果这个数据没有childrenif (!key["children"]){key["children"] = [];key["children"].push(treeArray[i]);// 如果这个数据有children}else{key["children"].push(treeArray[i]);}       } else {//如果没有这个Key值，就代表找不到属于哪个数据，那就代表没有父级,直接放在最外层r.push(treeArray[i]);}}return r}

树形结构数据转单层数组形式数据：

var jsonarr = [{id: 1,name: '北京市',ProSort: 1,remark: '直辖市',pid: '',isEdit: false,children: [{id: 35,name: '朝阳区',pid: 1,remark: '',isEdit: false,children: []}, {id: 36,name: '海淀区',pid: 1,remark: '',isEdit: false,children: []}, {id: 37,name: '房山区',pid: 1,remark: '',isEdit: false,children: []}, {id: 38,name: '丰台区',pid: 1,remark: '',isEdit: false,children: []}]}, {id: 2,name: '天津市',ProSort: 2,remark: '直辖市',pid: '',isEdit: false,children: [{id: 41,name: '北辰区',pid: 2,remark: '',isEdit: false,children: [{id: 113,name: '天津大道',ProSort: 2,remark: '道路',pid: '',isEdit: false,children:[]}]}, {id: 42,name: '河北区',pid: 2,remark: '',isEdit: false,children: []}, {id: 43,name: '西青区',pid: 2,remark: '',isEdit: false,children: []}]}, {id: 3,name: '河北省',ProSort: 5,remark: '省份',pid: '',isEdit: false,children: [{id: 45,name: '衡水市',pid: 3,remark: '',isEdit: false,children: []}, {id: 46,name: '张家口市',pid: 3,remark: '',isEdit: false,children: []}]}]
// 树形结构数据转单层数组形式function jsonToArray(nodes) {var r=[];if (Array.isArray(nodes)) {for (var i=0, l=nodes.length; i<l; i++) {r.push(nodes[i]); // 取每项数据放入一个新数组if (Array.isArray(nodes[i]["children"])&&nodes[i]["children"].length>0)// 若存在children则递归调用，把数据拼接到新数组中，并且删除该childrenr = r.concat(jsonToArray(nodes[i]["children"]));delete nodes[i]["children"]}} return r;}

为了不破坏原数据，我们需要对操作的数据进行深拷贝：

// 深拷贝function deepCopy(obj){var object;// 深度复制数组if(Object.prototype.toString.call(obj)=="[object Array]"){    object=[];for(var i=0;i<obj.length;i++){object.push(deepCopy(obj[i]))}   return object}// 深度复制对象if(Object.prototype.toString.call(obj)=="[object Object]"){   object={};for(var p in obj){object[p]=obj[p]}   return object}}

对两个方法的调用与验证：

var copydata = deepCopy(jsonarr)
var bb = jsonToArray(copydata)
console.log('json转数组',bb)
var aa = arrayToJson(data)
console.log('数组转树形结构',aa)

树形结构的数据与一维数组数据的相互转换相关推荐

树形json扁平化，一维数组树状化，对象深拷贝，元素后插入新元素，格式或动态路由等常用js合集
索引一.在元素后面插入一个新的元素. 二.对象或者数组的深拷贝. 三.从服务器端获取到动态路由表的格式化. 四.json树形数据扁平化处理(变成一维数组) 五.一维数组转化为树状结构对象. 六.防抖 ...
python 读取图片成为一维数组_在OpenCV里图像数据与一维数组转换
通过读取文件之后,生成的图像数据一般是二维或三维数组,每个数组元素是8位字节大小.有时候从网络里接收到一串数据,它是字节顺序的,比如有30000个字节,想要把它转换为300X100的图像大小,这个怎么 ...
python函一维聚类_聚类实战：一维数组数据聚类
大部分聚类方法针对的是多维数据,现实场景中还有可能存在以为数据的情况,针对以为数组的聚类和多维的数据有很大的不同,今天就来实战演练下: 需求内容:分析订单的价格分布常见方案:按照100为梯度,分析不 ...
在OpenCV里图像数据与一维数组转换
通过读取文件之后,生成的图像数据一般是二维或三维数组,每个数组元素是8位字节大小.有时候从网络里接收到一串数据,它是字节顺序的,比如有30000个字节,想要把它转换为300X100的图像大小,这个怎么 ...
树形结构 —— 树与二叉树 —— 树的数据生成器
为方便测试数据,给出一个树的数据生成器. 树的结点为 1~10 个,边权为 1~100,各点编号随机化 struct Edge {int x, y;int dis; } edge[N]; int n, ...
matlab小波变换数据少,一维离散数据小波变换实用案例
前言小波变换专业处理时变信号!其重要用途包含:突变点检测.时频分析.信号降噪等.本文将详细介绍小波变换的这3种主要用途,借助具体例子来说明并总结相关函数的使用. 间断点检测现实信号中的间断点是较为 ...
组织架构树形结构布局
实现组织架构的头部内容首先实现头部的结构,采用element的行列布局  <el-card class="tree-card" ...
Vue人资中台--公司组织架构(树形结构)
组织架构树形结构布局目标:使用element-UI组件布局组织架构的基本布局认识组织架构组织架构产品prd 一个企业的组织架构是该企业的灵魂,组织架构多常采用树形金字塔式结构,本章节,我们布局出 ...
人资项目day06-组织架构树形结构布局
使用element-UI组件布局组织架构的基本布局认识组织架构组织架构产品prd 一个企业的组织架构是该企业的灵魂,组织架构多常采用树形金字塔式结构,本章节,我们布局出页面的基本结构实现组织架构 ...

树形结构的数据与一维数组数据的相互转换

树形结构的数据与一维数组数据的相互转换相关推荐

最新文章

热门文章