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

更新日期: 2018-09-20阅读量: 5186标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Array.from() 五个超好用的用途

任何一种编程语言都具有超出基本用法的功能,它得益于成功的设计和试图去解决广泛问题。JavaScript 中有一个这样的函数: Array.from:允许在 JavaScript 集合(如: 数组、类数组对象、或者是字符串

js 数组方法,包含ES6方法

JavaScript常用数组操作方法:concat() 方法用于连接两个或多个数组。join() 方法用于把数组中的所有元素放入一个字符串。push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。pop() 方法用于删除并返回数组的最后一个元素。

JS 将有父子关系的数组转换成树形结构数据

将有父子关系的数组数据先分为两类,一类是没有父节点的数据(取个别名parents),另一类是有父节点的数据(取个别名children),然后通过遍历parents,对每一个父节点在children查找对应的子节点,并将其放入父节点的children中(这里我的是以children表示子节点),然后每个子节点又作为一个父节点来重复之前的动作

Array.slice 8种不同用法

在深入研究一些更高级的用法之前,让我们看一下slice方法的基础知识。如MDN文档,slice 是数组上的一个方法,它最多有两个参数,从该索引处开始提取原数组中的元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取

在 Array.filter 中正确使用 Async

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

JS实现遍历不规则多维数组的方法

这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下

原生js数组扁平化方法总汇,JavaScript多维数组如何实现扁平化处理返回一维数组

js数组扁平化就是指将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 JavaScript方法包括 递归、es5 Array 的reduce函数用法、toString方法、ES6扩展运算符...

从非数组对象转数组方法小结

从非数组对象转数组方法:Array.prototype.slice.call(obj、Array.from(obj)、[…obj]、Object.values(obj)等

js判断数组是否包含某个元素

js判断JS 判断某变量是否为某数组中的一个值的4种方法(总结),分享给大家。indexOf()、正则表达式、arr.find() 、for循环结合if判断

js实现交换数组元素位置的方法总汇

交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式:第三方变量、splice方法、解构赋值

点击更多...

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