js 数组操作的问题

Question

后端给我的数据是这样的：

let obj = [
    {
        areaName:"华南地区",
        cityName:"深圳"
    },
    {
        areaName:"华南地区",
        cityName:"广州"
    },
    {
        areaName:"华南地区",
        cityName:"海口"
    },
    {
        areaName:"华北地区",
        cityName:"黑龙江"
    }
];

我该怎么处理才能变成下面这种格式？

{
 areaName:"华南地区",
 children:[
    {
        cityName:"深圳"
    },
    {
        cityName:"广州"
    },
    {
        cityName:"海口"
    }]
},
{
areaName:"华北地区",
children:[
    {
        cityName:"黑龙江"
    }]
}

Answer 1

var obj = [
    {
        areaName:"华南地区",
        cityName:"深圳"
    },
    {
        areaName:"华南地区",
        cityName:"广州"
    },
    {
        areaName:"华南地区",
        cityName:"海口"
    },
    {
        areaName:"华北地区",
        cityName:"黑龙江"
    }
];
var areaNameArray = [];
obj.forEach(item=>{
    if(!areaNameArray.includes(item.areaName)) {
        areaNameArray.push(item.areaName)
    }
});
var result = areaNameArray.map(areaName=>{
    const children = obj.filter(item=>item.areaName === areaName).map(item=>({areaName:item.areaName}))
    return {
        areaName,
        children
    }
})

Answer 2

function getTree(arr) {
  return arr.reduce((accumulator, currentValue) => {
    let temp = { areaName: '', children: [] }
    const sameIdx = accumulator.findIndex(x => x.areaName === currentValue.areaName)

    if (sameIdx >= 0) {
      accumulator[sameIdx].children.push({
        cityName: currentValue.cityName
      })
      return accumulator
    } else {
      temp.areaName = currentValue.areaName
      temp.children.push({
        cityName: currentValue.cityName
      })
      accumulator.push(temp)
      return accumulator
    }
  }, [])
}

Answer 3

function processData(source) {
    const areaNameCash = [];
    const target = [];

    source.map(item => {
      const { areaName, cityName } = item;
      if (areaNameCash.includes(areaName)) {
        const _t = target.filter(item => item.areaName === areaName)[0];
        _t.children.push({ cityName });
      } else {
        areaNameCash.push(areaName);
        target.push({ areaName, children: [{ cityName }] });
      }
    });
    return target;
}

方法里面应该加空数组的处理。

Answer 4

let areaNameArr = [];
let result = [];
obj.forEach((item) => {
  if(areaNameArr.indexOf(item.areaName) == -1){
    areaNameArr.push(item.areaName) && result.push({areaName: item.areaName,children:[{cityName:item.cityName}]})
  } else{
    result.some((objItem) => {objItem.areaName == item.areaName && objItem.children.push({cityName:item.cityName})})
  }
})
console.log(result)

Answer 5

用js玩数组处理不用链式操作是没有灵魂的?

var arr = [
    {
        areaName:"华南地区",
        cityName:"深圳"
    },
    {
        areaName:"华南地区",
        cityName:"广州"
    },
    {
        areaName:"华南地区",
        cityName:"海口"
    },
    {
        areaName:"华北地区",
        cityName:"黑龙江"
    }
];
var res = [...new Set(arr.map(({ areaName}) => areaName))].map(areaName => ({
  areaName,
  children: arr.filter(item => item.areaName === areaName).map(({
    cityName
  }) => cityName)
}));
console.log(res)