Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

C V series features:

  1. Focus only on the implementation of functionality. Let you copy and paste can feel at ease to use
  2. Code comments will be detailed, line by line if possible, to clarify the details
  3. Involving third-party libraries and so on do not repeat, the library will be used to you see the link on the officer, convenient for you to in-depth understanding

So without further ado about the code

Presentation data

const list = [
            { id: '1'.path: "/views/dashBoard/index.vue".name: "Level".pid: "0" },
            { id: '2'.path: "/views/dashBoard/index.vue".name: "Secondary".pid: "1" },
            { id: '3'.path: "/views/dashBoard/index.vue".name: "Secondary".pid: "1" },
            { id: '4'.path: "/views/dashBoard/index.vue".name: "3".pid: "2" },
            { id: '5'.path: "/views/dashBoard/index.vue".name: "3".pid: "3" },
            { id: '6'.path: "/views/dashBoard/index.vue".name: "4".pid: "5" },
            { id: '7'.path: "/views/dashBoard/index.vue".name: "Level".pid: "0" }]
Copy the code

Method 1 :(recommended)

Execution efficiency: 0.05712890625 MS about 0.057

// Convert a flat array to a tree array
const formatTree1 = (arr) = > {
    let r = [];
    
    arr.forEach(function (a) {
        this[a.id] = a
        if (a.pid === '0') {
            r.push(this[a.id]);
        } else {
            this[a.pid] = this[a.pid] || {};
            this[a.pid].children = this[a.pid].children || [];
            this[a.pid].children.push(this[a.id]); }},Object.create(null)); // object.create (null) must be written as a value for this
    
    // Final data
    return r;
}

console.time()
formatTree1(list)
console.timeEnd()
Copy the code

Method 2 :(recommended)

Execution efficiency: 0.064208984375 MS about 0.06

// Convert a flat array to a tree array
const formatTree2 = (arr) = > {
    let kData = {} // The object with the id as the key temporarily stores data
    let lData = [] // Final data arr

    arr.forEach(m= > {
        kData[m.id] = m
        if (m.pid === '0') {
            lData.push(kData[m.id])
        } else{ kData[m.pid] = kData[m.pid] || {} kData[m.pid].children = kData[m.pid].children || []; kData[m.pid].children.push(kData[m.id]); }})// Final data
    return lData
}

console.time()
formatTree2(list)
console.timeEnd()
Copy the code

Method 3 :(not recommended)

Execution efficiency: 0.115966796875 ms 0.11

// Convert a flat array to a tree array
const formatTree3 = (arr) = > {
    let parents = arr.filter(item= > String(item.pid) === '0'); // Fetch the root node
    let childrens = arr.filter(item= > String(item.pid) ! = ='0');// Remove the child node

    function translator(parents, childrens) {
        parents.forEach(item= > {
            childrens.forEach(items= > {
                if (String(items.pid) === String(item.id)) {
                    item.children ? item.children.push(items) : item.children = [items];
                    translator([items], childrens);
                }
            })
        })
    }

    translator(parents, childrens);

    // Final data
    return parents
}

console.time()
formatTree3(list)
console.timeEnd()
Copy the code

The final output structure

[{"id": "1"."path": "/views/dashBoard/index.vue"."name": "Level"."pid": "0"."children": [{"id": "2"."path": "/views/dashBoard/index.vue"."name": "Secondary"."pid": "1"."children": [{"id": "4"."path": "/views/dashBoard/index.vue"."name": "3"."pid": "2"}]}, {"id": "3"."path": "/views/dashBoard/index.vue"."name": "Secondary"."pid": "1"."children": [{"id": "5"."path": "/views/dashBoard/index.vue"."name": "3"."pid": "3"."children": [{"id": "6"."path": "/views/dashBoard/index.vue"."name": "4"."pid": "5"}]}]}, {"id": "Seven"."path": "/views/dashBoard/index.vue"."name": "Level"."pid": "0"}]Copy the code

supplement

The efficiency of the test is not very stable. The value I gave above is a value that often appears in my test

Welcome to see more C V series C V big method