数组转换树结构
Array transformation tree structure
我有一个数组需要转成树形结构,搜索了一些场景,比如下面的代码,但是一旦数据量太大,生成这个需要的时间树结构好像太长了,请问有没有更好的解决方案或者优化!
var data = [{ id: 1, name: 'A', parentId: 0 },{ id: 2, name: 'B', parentId: 1 },{ id: 3, name: 'C', parentId: 2 },{ id: 4, name: 'D', parentId: 3 },{ id: 5, name: 'E', parentId: 4 },{ id: 6, name: 'F', parentId: 5 },{ id: 7, name: 'G', parentId: 6 },{ id: 8, name: 'H', parentId: 7 },{ id: 9, name: 'Z', parentId: 8 }];
var toTree = function(data) {
var map = {};
data.forEach(function(item) {
map[item.id] = item;
});
var val = [];
data.forEach(function(item) {
var parent = map[item.parentId];
if (parent) {
(parent.children || (parent.children = [])).push(item);
} else {
val.push(item);
}
});
return val;
}
console.log(toTree(data))
您可以使用单循环方法,其中 id
和 parentId
用于在同一循环中构建树。
最后 return 根节点的子节点。
var data = [{ id: 1, name: 'A', parentId: 0 }, { id: 2, name: 'B', parentId: 1 }, { id: 3, name: 'C', parentId: 2 }, { id: 4, name: 'D', parentId: 3 }, { id: 5, name: 'E', parentId: 4 }, { id: 6, name: 'F', parentId: 5 }, { id: 7, name: 'G', parentId: 6 }, { id: 8, name: 'H', parentId: 7 }, { id: 9, name: 'Z', parentId: 8 }],
tree = function (data, root) {
var o = {};
data.forEach(function (a) {
a.children = o[a.id] && o[a.id].children;
o[a.id] = a;
o[a.parentId] = o[a.parentId] || {};
o[a.parentId].children = o[a.parentId].children || [];
o[a.parentId].children.push(a);
});
return o[root].children;
}(data, 0);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
一种方法是首先更改您的数据,使其不是来自数组而是树结构图和数据图:
var treeStructure = {
'ROOT': ['childId1', 'childId2'],
'childId1': ['childId3']
}
var data = {
'childId1': {
'property1':1
},
'childId2': {
'property1':2
},
'childId3': {
'property1': 3
}
}
这样parent-child的关系就很清楚了,很容易找到每一项。
我有一个数组需要转成树形结构,搜索了一些场景,比如下面的代码,但是一旦数据量太大,生成这个需要的时间树结构好像太长了,请问有没有更好的解决方案或者优化!
var data = [{ id: 1, name: 'A', parentId: 0 },{ id: 2, name: 'B', parentId: 1 },{ id: 3, name: 'C', parentId: 2 },{ id: 4, name: 'D', parentId: 3 },{ id: 5, name: 'E', parentId: 4 },{ id: 6, name: 'F', parentId: 5 },{ id: 7, name: 'G', parentId: 6 },{ id: 8, name: 'H', parentId: 7 },{ id: 9, name: 'Z', parentId: 8 }];
var toTree = function(data) {
var map = {};
data.forEach(function(item) {
map[item.id] = item;
});
var val = [];
data.forEach(function(item) {
var parent = map[item.parentId];
if (parent) {
(parent.children || (parent.children = [])).push(item);
} else {
val.push(item);
}
});
return val;
}
console.log(toTree(data))
您可以使用单循环方法,其中 id
和 parentId
用于在同一循环中构建树。
最后 return 根节点的子节点。
var data = [{ id: 1, name: 'A', parentId: 0 }, { id: 2, name: 'B', parentId: 1 }, { id: 3, name: 'C', parentId: 2 }, { id: 4, name: 'D', parentId: 3 }, { id: 5, name: 'E', parentId: 4 }, { id: 6, name: 'F', parentId: 5 }, { id: 7, name: 'G', parentId: 6 }, { id: 8, name: 'H', parentId: 7 }, { id: 9, name: 'Z', parentId: 8 }],
tree = function (data, root) {
var o = {};
data.forEach(function (a) {
a.children = o[a.id] && o[a.id].children;
o[a.id] = a;
o[a.parentId] = o[a.parentId] || {};
o[a.parentId].children = o[a.parentId].children || [];
o[a.parentId].children.push(a);
});
return o[root].children;
}(data, 0);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
一种方法是首先更改您的数据,使其不是来自数组而是树结构图和数据图:
var treeStructure = {
'ROOT': ['childId1', 'childId2'],
'childId1': ['childId3']
}
var data = {
'childId1': {
'property1':1
},
'childId2': {
'property1':2
},
'childId3': {
'property1': 3
}
}
这样parent-child的关系就很清楚了,很容易找到每一项。