扁平陣列和樹形結構的相互轉換
阿新 • • 發佈:2021-09-29
扁平陣列和樹形結構的相互轉換
扁平陣列轉換為樹形結構(1)
這個是最常用的,當我們從後臺獲取一個扁平陣列的時候,通常比如用id
、pid
來標識父子關係,如:
var arr = [{id: 1, pid: '-1'},{id: 11, pid: '1'},{id: 12, pid: '1'}]
用map
記錄的方法是最常用效果也最好的複雜度是O(nlgn)
,支援多個根節點:
function listToTree(list) {
var map = {}, node, tree= [], i;
for (i = 0; i < list.length; i ++) {
map[list[i].id] = list[i];
list[i].children = [];
}
for (i = 0; i < list.length; i += 1) {
node = list[i];
if (node.pid !== '-1') {
map[node.pid].children.push(node);
} else {
tree.push(node);
}
}
return tree;
}
listToTree(arr); //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}]
但是專案中有個需求,在後臺沒有返回給帶層級資訊level
的時候,需要用到層級資訊,這樣轉換沒法計算出層級,因此就需要用迭代的方法了,預設根節點層級為0,依次遞增:
function listToTreeWithLevel(list, parent, level) {
var out = []
for (var node of list) {
if (node.pid == parent) {
node.level = level;
var children = listToTreeWithLevel(list, node.id, level + 1)
if (children.length) {
node.children = children
}
out.push(node)
}
}
return out
}
listToTreeWithLevel(arr, '-1', 0) //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[],"level":1},{"id":12,"pid":"1","children":[],"level":1}],"level":0}]
扁平陣列轉換為樹形結構(2)
fnSetTreeData(list) { var data = [...list]; data.forEach(father => { var branchArr = data.filter(child => { if (father.id == child.parentId) { child.hasParent = true; } return father.id == child.parentId; }); if (branchArr.length > 0) father.children = branchArr; }); return data.filter(item => { return !item.hasParent; }); }
樹形結構轉換為扁平陣列
這個其實就是資料結構中的廣度優先遍歷:
function treeToList(tree) {
var queen = [];
var out = [];
queen = queen.concat(tree);
while(queen.length) {
var first = queen.shift();
if (first.children) {
queen = queen.concat(first.children)
delete first['children'];
}
out.push(first);
}
return out;
}
var tree = [{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}];
treeToList(tree) //[{"id":1,"pid":"-1"},{"id":11,"pid":"1"},{"id":12,"pid":"1"}]