如何将一个列表封装为一个树形结构

后台将一个树状结构的数据，返回成了一个列表；

如何将这个列表封装为树形结构呢？

<script>
    var data = [{
        "area_id": 5,
        "name": "广东省",
        "parent_id": 0,
      },
      {
        "area_id": 6,
        "name": "广州市",
        "parent_id": 5,
      },
      {
        "area_id": 7,
        "name": "深圳市",
        "parent_id": 5,
      },
      {
        "area_id": 4,
        "name": "北京市",
        "parent_id": 3,
      },
      {
        "area_id": 3,
        "name": "北京",
        "parent_id": 0,
      },
    ]

    function setTreeData(arr) {
      // 删除所有的children,以防止多次调用
      arr.forEach(function (item) {
        delete item.children
      });
      let map = {}; //构建map
      arr.forEach(i => {
        map[i.area_id] = i; //构建以area_id为键 当前数据为值
      });
      let treeData = [];
      arr.forEach(child => {
        const mapItem = map[child.parent_id]; //判断当前数据的parent_id是否存在map中
        if (mapItem) { //存在则表示当前数据不是最顶层的数据
          //注意： 这里的map中的数据是引用了arr的它的指向还是arr,当mapItem改变时arr也会改变，踩坑点
          (mapItem.children || (mapItem.children = [])).push(child); //这里判断mapItem中是否存在child
        } else { //不存在则是顶层数据
          treeData.push(child)
        }
      })
      return treeData
    }
    console.log(setTreeData(data))