foreword
The front-end tree structure is generally used for the geographic location input box of the web page, the geographic location cascade selection, and the department selection of personnel.
A common practice is to use recursion to realize the tree structure, and some use the filter function to directly realize the tree structure.
1. Recursive implementation of tree structure
Recursion: A recursive function is a call of a function to itself, which is an algorithm mode of loop operation.
Classic example of recursive summation:
function sum(n) {
if (n == 1) return 1
return sum(n - 1) + n
}
Recursion must consist of the following two parts:
- The process of recursive calls
- Conditions for recursion termination: In the absence of constraints, a recursive operation calls itself without termination. Therefore, in the recursive operation, the control should be combined with the if statement, and the recursion is allowed only when a certain condition is true, otherwise it is not allowed to call itself.
The tree structure splicing of a menu list is realized as follows:
let arr = [
{
id: 1, parent: null, text: '菜单1' },
{
id: 11, parent: 1, text: '菜单1-1' },
{
id: 111, parent: 11, text: '菜单1-1-1' },
{
id: 112, parent: 11, text: '菜单1-1-2' },
{
id: 12, parent: 1, text: '菜单1-2' },
{
id: 2, parent: null, text: '菜单2' },
{
id: 21, parent: 2, text: '菜单2-1' },
{
id: 22, parent: 2, text: '菜单2-2' },
];
function getTreeList(rootList, id, list) {
for (item of rootList) {
if (item.parent == id) {
list.push(item);
}
}
for (i of list) {
i.children = [];
getTreeList(rootList, i.id, i.children);
}
return list;
}
let res = getTreeList(arr, null, []);
console.log(res);
Print:
Second, use the filter function to realize the tree structure
Data complexity O(n^2). When there is too much data, the time complexity explodes.
let cityList = [
{
id: 1, parentId: 0, name:'江苏省'},
{
id: 2, parentId: 0, name:'广东省'},
{
id: 3, parentId: 0, name:'安徽省'},
{
id: 4, parentId: 1, name:'苏州市'},
{
id: 5, parentId: 1, name:'无锡市'},
{
id: 6, parentId: 1, name:'南京市'},
{
id: 7, parentId: 2, name:'广州市'},
{
id: 8, parentId: 2, name:'深圳市'},
{
id: 9, parentId: 3, name:'合肥市'},
{
id: 10, parentId: 4, name:'工业园区'},
{
id: 11, parentId: 4, name:'吴中区'},
{
id: 12, parentId: 4, name:'姑苏区'},
{
id: 13, parentId: 9, name:'肥东区'},
{
id: 14, parentId: 9, name:'肥西区'},
{
id: 15, parentId: 6, name:'江宁区'},
{
id: 16, parentId: 6, name:'玄武区'}
];
let treeArr = [];
cityList.forEach(item => {
if(item.parentId === 0){
treeArr.push(item);
}
// 每一项都添加一个children
item.children = cityList.filter(child => child.parentId === item.id);
});
console.log(treeArr);
Print:
3. Ultimate optimization plan
The time complexity of the above solution may be a bit high. The following is a borrowed O(n)solution for your reference:
function jsonToTree(arr) {
// 使用map转存，增加查找效率
const map = new Map();
arr.forEach((item) => {
map.set(item.id, item);
});
// 将子元素依次放入父元素中
const res = [];
arr.forEach((item) => {
const parent = map.get(item.parentId);
if (parent) {
(parent.children || (parent.children = [])).push(item);
} else {
res.push(item);
}
});
console.log(res);
}
Four. Summary
I have written so much for the time being, and I will optimize it next time. If there is a master who optimizes it, please guide me in the comment area, thank you.
