将数组转换为树形结构

在前端开发中，调用接口获取数据是家常便饭。但我们都知道，不是每次 API 请求都会返回给我们想要的数据。比如下面这一段数据：

 const list = [
        { "id": 12, "parent_id": 1, "name": "朝阳区" },
        { "id": 241, "parent_id": 24, "name": "田林街道" },
        { "id": 31, "parent_id": 3, "name": "广州市" },
        { "id": 13, "parent_id": 1, "name": "昌平区" },
        { "id": 2421, "parent_id": 242, "name": "上海科技绿洲" },
        { "id": 21, "parent_id": 2, "name": "静安区" },
        { "id": 242, "parent_id": 24, "name": "漕河泾街道" },
        { "id": 22, "parent_id": 2, "name": "黄浦区" },
        { "id": 11, "parent_id": 1, "name": "顺义区" },
        { "id": 2, "parent_id": 0, "name": "上海市" },
        { "id": 24, "parent_id": 2, "name": "徐汇区" },
        { "id": 1, "parent_id": 0, "name": "北京市" },
        { "id": 2422, "parent_id": 242, "name": "漕河泾开发区" },
        { "id": 32, "parent_id": 3, "name": "深圳市" },
        { "id": 33, "parent_id": 3, "name": "东莞市" },
        { "id": 3, "parent_id": 0, "name": "广东省" }
    ]

当我们有这样的数据的时候，需要我们将其转换为树形结构才可以正常使用。因此下面是我的方法，希望大佬们指正！

方法一：

利用递归。在每次遍历中筛选出当前根节点的子节点，直至所有节点都归类到相应父节点。此时，filter 返回空数组，递归停止。

    /**
     * 数组转树形结构
     * @param {array} list 被转换的数组
     * @param {number|string} root 根节点（最外层节点）
     * @returns array 返回一个转换后的树形结构
     */
    function arrayToTree(list, root) {
        return list
            .filter(item => item.parent_id === root)
            .map(item => ({ ...item, children: arrayToTree(list, item.id) }))
    }
    console.log(arrayToTree(list, 0))

方法二：

浅拷贝是拷贝对象的引用地址，只要修改，所有引用都会同步修改。利用这个特点，我们将子节点依次放入父节点，最后将最外层父节点返回即可。

  function listToTree(arr) {
        let map = {}
        arr.forEach(item => {
            map[item.id] = item
        });
        let result = []
        arr.forEach(item => {
            let father = map[item.parent_id]
            if (father) {
                father.children = father.children || []
                father.children.push(item)
            } else {
                result.push(item)
            }
        })
        return result
    }
    console.log(listToTree(list))