关闭

js实现一维数组转换为树形结构数组

时间: 2018-09-20阅读: 4221标签: array

在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过js实现一维数组转换为树形结构数组。


js代码实现:

/*
 *函数定义
 *入口参数data,平行数组
 *key,id字段
 *parentKey,父字段
 *map,需要将原始属性名称转换为什么名称
 */
function treeUtil(data, key, parentKey, map) {
	this.data = data;
	this.key = key;
	this.parentKey = parentKey;
	this.treeParentKey = parentKey; //parentKey要转换成什么属性名称
	this.treeKey = key; //key要转换成什么属性名称
	this.map = map;
	if(map) {
		if(map[key]) this.treeKey = map[key];
	}
	this.toTree = function() {
		var data = this.data;
		var pos = {};
		var tree = [];
		var i = 0;
		while(data.length != 0) {
			if(data[i][this.parentKey] == 0) {
				var _temp = this.copy(data[i]);
				tree.push(_temp);
				pos[data[i][this.key]] = [tree.length - 1];
				data.splice(i, 1);
				i--;
			} else {
				var posArr = pos[data[i][this.parentKey]];
				if(posArr != undefined) {
					var obj = tree[posArr[0]];
					for(var j = 1; j < posArr.length; j++) {
						obj = obj.children[posArr[j]];
					}
					var _temp = this.copy(data[i]);
					obj.children.push(_temp);
					pos[data[i][this.key]] = posArr.concat([obj.children.length - 1]);
					data.splice(i, 1);
					i--;
				}
			}
			i++;
			if(i > data.length - 1) {
				i = 0;
			}
		}
		return tree;
	}
	this.copy = function(item) {
		var _temp = {
			children: []
		};
		_temp[this.treeKey] = item[this.key];
		for(var _index in item) {
			if(_index != this.key && _index != this.parentKey) {
				var _property = item[_index];
				if((!!this.map) && this.map[_index])
					_temp[this.map[_index]] = _property;
				else
					_temp[_index] = _property;
			}
		}
		return _temp;
	}
}


使用:

//使用示例,data需要有key parentKey属性,其它属性内容没有限制。
var data=[
    {id:1,parent:0,name:'A'},
    {id:2,parent:4,name:"B"},
    {id:3,parent:7,name:"C"},
    {id:4,parent:1,name:"D"},
    {id:5,parent:0,name:"E"},
    {id:6,parent:5,name:'B'},
    {id:7,parent:4,name:"F"}
];
//简单使用
var tree = new treeUtil(data, 'id', 'parent');
console.log(tree.toTree());
//带属性名称转换
data=[
    {id:1,parent:0,name:'A'},
    {id:2,parent:4,name:"B"},
    {id:3,parent:7,name:"C"},
    {id:4,parent:1,name:"D"},
    {id:5,parent:0,name:"E"},
    {id:6,parent:5,name:'B'},
    {id:7,parent:4,name:"F"}
];
var map = {
	"name":"title","id": "id0"
};
var tree1 = new treeUtil(data, 'id', 'parent', map);
console.log(tree1.toTree());


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1101

关闭

js中的Array

Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法;参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时

JavaScript数组中的22个常用方法

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍

数组去重_原生js对普通数组去重算法的7种方法总结

JavaScript实现普通数组去重,讲解各种算法的思想和改进方法,已经他们的优缺点...利用数组的reduce方法,使用了filter方法,利用ES6去重,相对来说更为简单

for in 和 for of的区别详解

for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错。for ... in 循环返回的值都是数据结构的 键值名。遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名

Array数组相关方法

push向数组末尾添加元素;unshift向数组开头增加元素;pop删除数组末尾一项;shift删除数组的第一项;join为数组添加指定的分隔符;slice找某一区域内的项,返回成新数组形式

es6之Array.of()和Array.from()

es6新增了二种方法:Array.of()和Array.from(),它们有什么用途呢?在平时的开发中能给我们带来什么方便呢?本篇将从一个创建数组的小问题开始,逐步揭开它们的面纱。

在 Array.filter 中正确使用 Async

在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法。

使用 Array.fill( ) 填充对象的问题

当你想使用 Array.fill( ) 来填充一个全是空白对象的数组时需要特别注意。Array(length).fill({ }) 这样填充创建的数组,里面每一项{ }都完全相同

认识array method的reduce

reduce属于javascript「synchronize同步」的array method,他就是把一整个array的所有内容,有顺序性的挤压squeeze最后变成一个值

js判断对象、数组是否为空

做项目时想要根据判断对象是否为空,然后执行不同的操作,下面就整理下如何实现,针对数组和对象的通用方法。方法一:isPrototypeOf()和length判断、方法二:hasOwnProperty、方法三:利用JSON.stringify()方法

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!