数组转树结构数据

88 阅读2分钟

题目:将数组数据转为tree结构的数据: 例子:

[{"id":"12","parentId":"0","text":"Man","level":"1","children":null}, 
{"id":"6","parentId":"12","text":"Boy","level":"2","children":null}, 
{"id":"7","parentId":"12","text":"Other","level":"2","children":null},
{"id":"9","parentId":"0","text":"Woman","level":"1","children":null}, 
{"id":"11","parentId":"9","text":"Girl","level":"2","children":null}]

变成=>

[ 
    {"id":"12",
    "parentId":"0",
    "text":"Man",
    "level":"1",
    "children": [ 
        {"id":"6","parentId":"12","text":"Boy","level":"2","children":null}, 
        {"id":"7","parentId":"12","text":"Other","level":"2","children":null} 
        ] 
    },
    {"id":"9",
    "parentId":"0",
    "text":"Woman",
    "level":"1",
    "children": [
        {"id":"11","parentId":"9","text":"Girl","level":"2","children":null
        } 
    ] 
   } 
]

当时看到这道题的时候,题目是 ‘数组转树’ 四个字,我以为是数组转成二叉树,脑海里面先过了一遍,然后再看到实例才反应过来我理解错了.hhhhh

在解题前我们先来看一个小例子:

image.png

由于浅拷贝的原因,我们赋值的只是一个引用地址 ,当修改引用地址里的值时,对应的之前的赋值也被修改了。 我们利用上一点,可以实现以下的步骤:

思路:

1、new 一个空数组 result ,用来装拼装后数据.

2、让id与parentItem对应的成为一个匹配的对象,以便用于遍历时候的查询

伪代码: new map,遍历=>{id:parentItem}

2、遍历list, 当item.parentId === id(map里的key)时,将 item 添加到 parentItem的children里

伪代码:map[id].children.push(item)

3、考虑是最外层的情况,此题中最外层的数据的parentId为0;所以当item.parentId === 0 时,直接result.push(item);

伪代码:result.push(item);

此时的result里面已经是转化好的结构了,原因可以参考前面的那个浅拷贝的小例子.

function arrayToTree(arr){
    let result = [];
    let map = {}; 
    
    arr.forEach((el)=>{   //构建map对象
        map[el.id] = el;
    })
    
    for(let i = 0; i<arr.length; i++){
        let pid = arr[i].parentId;
        
        if(pid === '0' ){//判断是否是最外层
            result.push(map[arr[i].id]);
            continue;
        }

        map[pid].children = map[pid].children ? map[pid].children : [];//补充空数组
        map[pid].children.push(map[pid]); //放入对应的parent里的children
    }
    return result;
}