JS 如何快速高效的将数组转换成树形结构

    const data = [{
        id: 1,
        pid: 0,
        name: 'body'
    }, {
        id: 2,
        pid: 1,
        name: 'title'
    }, {
        id: 3,
        pid: 2,
        name: 'div'
    }];
     转化为这种: [{
        id: 1,
        pid: 0,
        name: 'body',
        children: [{
            id: 2,
            pid: 1,
            name: 'title',
            children: [{
                id: 3,
                pid: 1,
                name: 'div'
            }]
        }]
    }]

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
 

上代码:

    function toTree(data) {
        // 空数组
        let result = [];
        // 判断不是数组  直接返回
        if (!Array.isArray(data)) {
            return result
        }
        // 遍历  删除  children 属性  做初始化操作
        data.forEach(item => {
            delete item.children;
        });
        //  空对象
        let map = {};
        data.forEach(item => {
            map[item.id] = item;
        });

        /**
         * map对象的 键: 是每个id  值：对应的item
         * 1: {id: 1, pid: 0, name: "body"}
         * 2: {id: 2, pid: 1, name: "title"}
         * 3: {id: 3, pid: 2, name: "div"}
         */
        data.forEach(item => {
            // item.pid 为0时 返回underfined
            let parent = map[item.pid];
            if (parent) {
                (parent.children || (parent.children = [])).push(item);
            } else {
                // 这里push的item是pid为0的数据
                result.push(item);
            }
        });
        return result;
    }

    console.log(toTree(data))

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
 

完事！

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108501107