Javascript 实现根据某个属性给数组中的对象归类

349 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

在工作中可能有这样的场景:后台给前端一堆数据(一个数组),但是这个数组并不符合项目业务的需求,所以在使用之前前端需要根据数组中对象的某个属性对所有对象进行分类(虽然正常情况下应该是后端根据业务需求处理好数据给前端,但是为了项目继续干下去,实在不行只能前端自己处理)

比如下面这组数据,要求根据 year 这个属性划分所有对象:

image.png

处理之后的效果:

image.png

其实就是按年份划分数据,方法:

var arr =[
    {
        name: 'aa',
        id: 1,
        year: 2020,
    },
        {
        name: 'ss',
        id: 2,
        year: 2022,
    },
        {
        name: 'dd',
        id: 3,
        year: 2021,
    },
        {
        name: 'afda',
        id: 4,
        year: 2020,
    },
        {
        name: 'afdsa',
        id: 5,
        year: 2022,
    },
        {
        name: 'asdfa',
        id: 6,
        year: 2022,
    },
        {
        name: 'aa',
        id: 7,
        year: 2020,
    },
];
function dealWithData(data){
  let c = [];
   let d = {};
   data.forEach(element => {
      if(!d[element.year]){
          c.push({
              year: element.year,
              allData: [element]
          });
          d[element.year] = element;
      }else{
          c.forEach(ele => {
              if(ele.year == element.year){
                  ele.allData.push(element);
              }
          });
       }
                
 });
  return c;
}

console.log(dealWithData(arr));

其实应该再加工处理一下,改用活的就活的,也就是用变量,毕竟以后还可能需要按照别的属性分类:

function dealWithData(data, prop){
  let c = [];
   let d = {};
   data.forEach(element => {
      if(!d[element[prop]){
          c.push({
              [prop]: element[prop],
              allData: [element]
          });
          d[element.year] = element;
      }else{
          c.forEach(ele => {
              if(ele[prop] == element[prop]){
                  ele.allData.push(element);
              }
          });
       }
                
 });
  return c;
}

console.log(dealWithData(arr));

所以方法中的 属性 year可以替换成你需要的任意属性。

这里如果是多层数组的话,可以用递归,也就是在函数的定义中使用函数自身的方法。但是这里要享用递归的话数据结构应该也有变化,这里函数的变量属性也可以改成任意你需要的数量。

这个是几年前写的方法,这里方法里的forEach也可以换成别的,map方法之类的。

大家可以自己用es6把它优化一下。

希望本文对您有所帮助!