js小算法-将数组处理成树状结构

 方法一 ：

let haoroomsDataArr = [
    { id: 1, name: "haorooms1" },
    { id: 2, name: "haorooms2", parentId: 1 },
    { id: 4, name: "haorooms4", parentId: 3 },
    { id: 3, name: "haorooms3", parentId: 2 },
    { id: 8, name: "haorooms18", parentId: 7 },
    { id: 7, name: "haorooms2" },
];



function getTreeData(arr) {
    let parents = arr.filter(item => !item.parentId); //取出根节点
    let childrens = arr.filter(item => item.parentId);//取出子节点

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

    translator(parents, childrens);

    return parents
}

console.log(getTreeData(haoroomsDataArr))

输出结果

[{
    "id": 1,
    "name": "haorooms1",
    "children": [{
        "id": 2,
        "name": "haorooms2",
        "parentId": 1,
        "children": [{
            "id": 3,
            "name": "haorooms3",
            "parentId": 2,
            "children": [{
                "id": 4,
                "name": "haorooms4",
                "parentId": 3
            }]
        }]
    }]
}, {
    "id": 7,
    "name": "haorooms2",
    "children": [{
        "id": 8,
        "name": "haorooms18",
        "parentId": 7
    }]
}]

方法二： 

let arr = [
{ id: 1, menuPath: "/views/dashBoard/index.vue", menuName: "一级", pid: "0" },
{ id: 2, menuPath: "/views/dashBoard/index.vue", menuName: "二级", pid: "1" },
{ id: 3, menuPath: "/views/dashBoard/index.vue", menuName: "二级", pid: "1" },
{ id: 4, menuPath: "/views/dashBoard/index.vue", menuName: "三级", pid: "2" },
{ id: 5, menuPath: "/views/dashBoard/index.vue", menuName: "三级", pid: "3" },
{ id: 6, menuPath: "/views/dashBoard/index.vue", menuName: "四级", pid: "5" },
{ id: 7, menuPath: "/views/dashBoard/index.vue", menuName: "一级", pid: "0" },
]

function formatTree(arrs) {
    var r = [];
    arrs.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) 必须写 用作 this 的值
    
    // 最终的数据
    return r;
}
let res = formatTree(arr);
console.log(res)

//用时testForEach: 0.39599609375 ms

输出结果:

[{
	"id": 1,
	"menuPath": "/views/dashBoard/index.vue",
	"menuName": "一级",
	"pid": "0",
	"children": [{
		"id": 2,
		"menuPath": "/views/dashBoard/index.vue",
		"menuName": "二级",
		"pid": "1",
		"children": [{
			"id": 4,
			"menuPath": "/views/dashBoard/index.vue",
			"menuName": "三级",
			"pid": "2"
		}]
	}, {
		"id": 3,
		"menuPath": "/views/dashBoard/index.vue",
		"menuName": "二级",
		"pid": "1",
		"children": [{
			"id": 5,
			"menuPath": "/views/dashBoard/index.vue",
			"menuName": "三级",
			"pid": "3",
			"children": [{
				"id": 6,
				"menuPath": "/views/dashBoard/index.vue",
				"menuName": "四级",
				"pid": "5"
			}]
		}]
	}]
}, {
	"id": 7,
	"menuPath": "/views/dashBoard/index.vue",
	"menuName": "一级",
	"pid": "0"
}] 

方法三：

console.time("testForEach")

let haoroomsDataArr = [
{ id: 1, name: "haorooms1" },
    { id: 7, name: "haorooms2" },
    { id: 2, name: "haorooms2", parentId: 1 },
    { id: 3, name: "haorooms3", parentId: 2 },
    { id: 4, name: "haorooms4", parentId: 3 },
    { id: 8, name: "haorooms18", parentId: 7 },
];
function getTree(arr){
    let res = [];
    let obj = {};
    for(let item of arr){
        let id = item.id;
        let pid = item.parentId ? item.parentId :0;
        if(pid===0){
            res.push(item)
        }
        if(!obj[id]){
            item.children = [];
            obj[id]=item;
        }else{
            obj[id]={
                ...item,
                children:obj[id].children
            }
        }

        if(!obj[pid]&&pid!==0){
            obj[pid] = {
                children : [item]
            }
        }else if(obj[pid]&&pid!==0){
         obj[pid].children.push(item)
        }
    }
    return res
}

console.log(getTree(haoroomsDataArr))

console.timeEnd("testForEach")

//testForEach: 0.502197265625 ms   用时0.5ms

方法四：

let arr = [
    { id: 1, menuPath: "/views/dashBoard/index.vue", menuName: "一级", pid: "0" },
    { id: 2, menuPath: "/views/dashBoard/index.vue", menuName: "二级", pid: "1" },
    { id: 3, menuPath: "/views/dashBoard/index.vue", menuName: "二级", pid: "1" },
    { id: 4, menuPath: "/views/dashBoard/index.vue", menuName: "三级", pid: "2" },
    { id: 5, menuPath: "/views/dashBoard/index.vue", menuName: "三级", pid: "3" },
    { id: 6, menuPath: "/views/dashBoard/index.vue", menuName: "四级", pid: "5" },
    { id: 7, menuPath: "/views/dashBoard/index.vue", menuName: "一级", pid: "0" },
]

function arrayToTree(list, pid = "0") {
    return list.filter(item => {
        return item.pid == pid
    }).map(item => {
        return {
            ...item,
            children: arrayToTree(arr, item.id)
        }
    })
}
let res = arrayToTree(arr);