js实现tree结构树生成

使用es5 Array.reduce()方法实现

1.语法

 

 

2.参数

 

 3.实现代码

//树形数据
let child = [
        {
            name: "文件1",
            pid: 1,
            id: 10001
        },
        {
            name: "文件2",
            pid: 1,
            id: 10002
        },
        {
            name: "文件2-1",
            pid: 2,
            id: 10003
        },
        {
            name: "文件2-2",
            pid: 2,
            id: 10004
        },
        {
            name: "文件1-1-1",
            pid: 4,
            id: 10005
        },
        {
            name: "文件2-1-1",
            pid: 5,
            id: 10006
        },
 ];
let parent = [
        {
            name: "文件夹1",
            pid: 0,
            id: 1
        },
        {
            name: "文件夹2",
            pid: 0,
            id: 2
        },
        {
            name: "文件夹3",
            pid: 0,
            id: 3
        },
        {
            name: "文件夹1-1",
            pid: 1,
            id: 4
        },
        {
            name: "文件夹2-1",
            pid: 2,
            id: 5
        },
];
let allData = [...child, ...parent];

let treeMapList = allData.reduce((prev, current) => {
        prev[current['id']] = current;
        return prev;
}, {});

let result = allData.reduce((arr, current) => {
        let pid = current.pid;
        let parent = treeMapList[pid];
        if (parent) {
            parent.children ? parent.children.push(current) :             
            parent.children = [current];
        } else if (pid === 0) {
            arr.push(current);
        }
        return arr;
}, []);