const filterList = jiraList.filter(i => !i.parentKey ||
!jiraList.some(it => it.key === i.parentKey));
// 如果節點存在parentKey但是parentKey對應的對象不在數組內，則需要提升當前節點爲父節點
const exceptParent = jiraList.filter(i => i.parentKey);
/**
js實現多層級樹結構第一種方法
直接遞歸，不開闢新數組，算法複雜度較高，實現簡單
*/
// 防止多次渲染數據不正確
jiraList.forEach(item => {
item.children = null;
});
const deepData = (item) => {
exceptParent.forEach(it => {
if (it.parentKey === item.key) {
item.children = item.children || [];
item.children.push(it);
deepData(it); // 對當前子節點進行遞歸
}
});
};
filterList.map(item => {
deepData(item); // 對頂層父節點進行遞歸
});
/**
js實現多層級樹結構第二種方法
直接遞歸，開闢新數組
*/
const deepData = (item) => {
let arr = []; // 開闢新數組，防止多次渲染導致結果不正確
exceptParent.filter(it => it.parentKey === item.key)
.forEach(it => {
arr.push({
...it,
children: deepData(it)
});
});
return arr.length ? arr : null;
};
filterList.map(item => {
const children = deepData(item);
item.children = children;
});
/**
js實現多層級樹結構第三種方法(第一種實現)
構建map對象，依靠指針引用構建樹的父子關係
*/
const setTreeData = (arr) => {
// 刪除所有 children,以防止多次調用
arr.forEach(item => {
item.children = null;
});
let map = {}; // 構建map
arr.forEach(i => {
map[i.key] = i; // 構建以key爲鍵 當前數據爲值
});
let treeData = [];
arr.forEach(child => {
// 如果能夠在map對象中找到對應的對象，則當前的child不是父節點，需要push到父節點的children下
const mapItem = map[child.parentKey];
// 存在則表示當前數據不是最頂層數據
if (mapItem) {
// 這裏找到的mapItem的指針指向的是arr，所以mapItem的改變會影響arr的改變
// 這裏需要判斷mapItem中是否存在children, 存在則插入push當前數據, 不存在則賦值children爲[]然後再push當前數據
mapItem.children = mapItem.children || [];
mapItem.children.push(child);
// else對應的則是最頂層父節點數據
} else {
treeData.push(child);
}
});
return treeData;
};
console.log('seee', setTreeData(jiraList));
/**
js實現多層級樹結構第三種方法(第二種實現)
構建map對象，依靠指針引用構建樹的父子關係
想比如第三種方法的第一種實現，這裏先把所有的頂級父節點取出來，然後針對子節點進行操作
*/
const setTreeData = (jiraList) => {
const exceptParent = jiraList.filter(i => i.parentKey);
// 刪除所有 children,以防止多次調用
jiraList.forEach(item => {
item.children = null;
});
let map = {};
jiraList.forEach(i => {
map[i.key] = i;
});
exceptParent.forEach(child => {
const mapItem = map[child.parentKey];
mapItem.children = mapItem.children || [];
mapItem.children.push(child);
});
};
setTreeData(jiraList);