扁平数据结构转tree

逛掘金的时候看到一篇名为《面试了十几个高级前端，竟然连（扁平数据结构转Tree）都写不出来》的文章，瞬间就让我产生了兴趣，从这就可以看出，一个好的标题有多么重要。

题目:

将一个扁平化数据转成树

let arr = [
    {id: 1, name: '部门1', pid: 0},
    {id: 2, name: '部门2', pid: 1},
    {id: 3, name: '部门3', pid: 1},
    {id: 4, name: '部门4', pid: 3},
    {id: 5, name: '部门5', pid: 4},
]

结果

[
    {
        "id": 1,
        "name": "部门1",
        "pid": 0,
        "children": [
            {
                "id": 2,
                "name": "部门2",
                "pid": 1,
                "children": []
            },
            {
                "id": 3,
                "name": "部门3",
                "pid": 1,
                "children": [
                    // 结果 ,,,
                ]
            }
        ]
    }
]

方案1

采用了复杂数据类型浅拷贝时赋值地址的特性

缺点：

1. 只能处理特定格式的数据
2. 会改变原数据

let finArr = []
arr.forEach(element => {
    element.children = []
    if (element.pid === 0) {
        finArr.push(element)
    } else {
        arr.find(item => item.id == element.pid).children.push(element)
    }
});
console.log('finArr', finArr);

优化

解决了缺点2，依旧保留缺点1

//深拷贝
let finArr = JSON.parse(JSON.stringify(arr))
finArr.forEach(element => {
    element.children = []
    if (element.pid !== 0) finArr.find(item => item.id == element.pid).children.push(element)
});
finArr = finArr[0]
console.log('finArr', finArr);
console.log('arr', arr);

造成缺点1的原因是element.children = []的是时机不对，那么将这段代码放置在其余操作之外，就可以将每个元素放到其父元素的children中，而不用考虑顺序的问题，于是出现了方案2

方案2

解决了方案1的两个缺点，但是使用了两个forEach

let finArr = JSON.parse(JSON.stringify(arr))
finArr.forEach(element => {
    element.children = []
});
finArr.forEach(element => {
    if (element.pid !== 0) finArr.find(item => item.id == element.pid).children.push(element)
});
finArr = finArr.find(item => item.pid == 0)
console.log('finArr', finArr);
console.log('arr', arr);

优化

前面的解决思路都是将每个元素push到父元素中，然后一条评论给了我灵感，为什么不找到每个元素的children然后直接赋值呢，这样也就解决了方案2的问题

let finArr = JSON.parse(JSON.stringify(arr))
finArr.forEach(element => {
    element.children = finArr.filter(item => item.pid == element.id)
});
finArr = finArr.find(item => item.pid == 0)
console.log('finArr', finArr);
console.log('arr', arr);

参考：https://juejin.cn/post/6983904373508145189