怎么处理后端返回复杂的数据?

现有api返回数据

[
        {
          province: '广东省',
          city: '广州市',
          districr: '天河区',
        },
        {
          province: '广东省',
          city: '广州市',
          districr: '白云区',
        },
        {
          province: '广东省',
          city: '东莞市',
          districr: '常平镇',
        },
]

请问如何在最短时间内处理成? 使用es6的解构赋值可以解决吗? 这是之前遇到的面试题。

 [
        {
          name: '广东省',
          children: [
            {
              name: '广州市',
              children: [{ name: '天河区' }, { name: '白云区' }]
            },
            { 
              name: '东莞市', 
              children: [{ name: '常平镇' }]
            },
          ],
        },
]

function processArray(){
  var obj = {
    "name": "广东省",
    "children": []
  }
  arr.forEach(item => {
    var city_has_include = obj.children.some(child => child.name == item.city);
    if(!city_has_include){
      obj.children.push(
        {
          "name": item.city,
          "children": [
            {"name": item.districr}
          ]
        }
      )
    }else {
      obj.children.forEach(city => {
        if(city.name == item.city){
          city.children.forEach(qu => {
            if(qu.name != item.districr){
              city.children.push({"name": item.districr});
            }
          })
        }
      })
    }
  });
  console.log('obj :>> ', obj);
}

建议直接使用jsonPath或者jsonQuery这种插件 ,npm 就可以下载

建议让后端直接在查数据库的时候返回这种结构的数据给你，前端当然也能实现，但是拿到数据之后需要遍历处理，请试想一下，如果数据量很大，你从api拿到数据了，但是需要遍历处理才能使用或者显示出来，这个时候，遍历时间如果稍微长一点，就会导致前端页面有一段间隙是空白，用户体验不好