在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端,前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过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());
JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...
js数组扁平化就是指将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。 JavaScript方法包括 递归、es5 Array 的reduce函数用法、toString方法、ES6扩展运算符...
JavaScript实现普通数组去重,讲解各种算法的思想和改进方法,已经他们的优缺点...利用数组的reduce方法,使用了filter方法,利用ES6去重,相对来说更为简单
如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!
javascript创建数组的几种方式:1、字面量形式直接创建数组,2、Array构造函数创建数组。js数组常用的方法有哪些:join(),push()和pop(),shift() 和 unshift(),sort(),reverse(),concat()等
every、some、filter、map这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别.
从非数组对象转数组方法:Array.prototype.slice.call(obj、Array.from(obj)、[…obj]、Object.values(obj)等
这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下
数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍
在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!