如何将相同属性的数组对象合并并统计个数

类别: 一题多解
博客: blog.csdn.net/qtfying
掘金: juejin.cn/user/430094…
QQ: 2811132560
邮箱: qtfying@gamil.com

这两天在浏览博客的时侯，发现这样一个题，就尝试着去解了一把，现在把解的几个方法贴出来，供大家参考和学习

目标数组为:

  let data = [{
      id: '1',
      goodsName: 'test',
      price: 22
    },
    {
      id: '2',
      goodsName: 'test',
      price: 22
    },
    {
      id: '2',
      goodsName: 'test',
      price: 22
    },
    {
      id: '3',
      goodsName: 'test',
      price: 22
    },
    {
      id: '3',
      goodsName: 'test',
      price: 22
    },
    {
      id: '3',
      goodsName: 'test',
      price: 22
    },
    {
      id: '3',
      goodsName: 'test',
      price: 22
    },
    {
      id: '4',
      goodsName: 'test',
      price: 22
    }
  ]

目标结果为：

  let data = [{
      id: '1',
      goodsName: 'test',
      price: 22,
      count:1
    },
    {
      id: '2',
      goodsName: 'test',
      price: 22,
      count:2
    },
    {
      id: '3',
      goodsName: 'test',
      price: 22,
      count:4
    },
    {
      id: '4',
      goodsName: 'test',
      price: 22,
      count:1
    }
  ]

分析题意：就是对象中一样的item合并为一项，并且计数，为item增加count的键值

• 第一种解决办法为最原始的，也是最原始的去重方式

  var interimArray = [];   // 用来存放去重后的id的
  var resultArray = [];   // 最终的期望结果

  var count = 1;
  for (var i in data) {
    if (interimArray.indexOf(data[i].id) > -1) {
      console.log(`${data[i].id}已经存在，计数加1`, `count为${count}`);
      for (var j in resultArray) {
        if (resultArray[j].id === data[i].id) {
          count++;
          resultArray[j].count = count;
        }
      }
    } else {
      count = 1;
      console.log(`${data[i].id}不存在，数组加入${data[i].id}`, `count重置为${count}`);
      interimArray.push(data[i].id);
      data[i].count = count;
      resultArray.push(data[i]);
    }
  }

  console.log(JSON.stringify(resultArray, null, 2));

• 第二种解决办法为将id当键值，判断该键值是否存在，在去取value成数组

  let result = {};
  for (let i = 0, len = data.length; i < len; i++) {
    let dataArr = data[i];
    if (result[dataArr.id]) {
      result[dataArr.id].count ++;
    } else {
      result[dataArr.id] = { ...dataArr, count: 1 };
    }
  }
  let resultArr = [];
  for (const key in result) {
    resultArr.push(result[key]);
  }

  console.log(JSON.stringify(Object.values(result), null, 2));

• 第三种类似于第二种只不过是利用Object.entries将第二种对象转为二维数组

  // reduce的4个参数 prev, cur, index, arr
  var twoDimensionalArray = Object.entries(data.reduce((prev, cur) => {
    if (!prev[cur.id]) {
      prev[cur.id] = {
        ...cur,
        count: 1
      };
    } else {
      prev[cur.id].count += 1;
    }
    return prev;
  }, {}));

  var result = twoDimensionalArray.map(entry => entry[1]);

  console.log(JSON.stringify(result, null, 2));

• 第四种是用reduce方法对第一种方法进行精简

  let result = data.reduce((obj, item) => {
    let find = obj.find(i => i.id === item.id);
    let _d = {
      ...item,
      count: 1
    };
    find ? find.count++ : obj.push(_d);
    return obj;
  }, []);

  console.log(JSON.stringify(result, null, 2));

麻雀虽小，五脏俱全，一个题目考察点有数组的去重，Set，reduce，Object.keys（），Object.values()，Object.entries，二维数组，循环的三种方法：map、for、reduce等等