JavaScript将有相同内容的数组或对象的值进行累加

一看到这个标题,确实标题过长,不过只有长标题才能真正的说明问题。下面就使用一个实例来讲解下我到底要做什么。
其实在平时的编程中,我们可能会经常遇到如下这样的问题,就像我们的后端要从数据库中读取相同id的内容,并且合并相同id已有的值。

var arry = [{
        pid:123,
        info: '男'
    },{
        pid:123,
        info:'女'
    },{
        pid:123,
        info: '未知'
    },{
        pid:456,
        info: '东'
    },{
        pid:456,
        info:'西'
    },{
        pid:456,
        info: '南'
    },{
        pid:456,
        info: '北'
    }]

我们看到以上数组对象中,可以看到有很多个相同pid的属性值,我的目的就是将其相同的pid值的对象的info值全部合并起来,诸如
[{pid:123,info:’男/女/未知’},{pid:456,info:’东/西/南/北’}]
也就是说将相同的pid的相关内容进行合并。

第一、使用reduce方法

let newArr = arry.sort((pre, next) => pre.pid > next.pid).reduce((pre, v) => {
  let lastIndex = pre.length - 1;
  if (lastIndex >= 0 && pre[lastIndex].pid === v.pid) {
    pre[lastIndex].info += v.info;
  } else {
    pre.push(Object.assign({}, v));
  }
  return pre;
}, []);
console.log(newArr);

这种方法确实挺不错,也很容易理解,但是不确定是否会对性能造成问题。另外就是对中文的支持并不好!很有可能我们会得到如下内容
[{pid:123,info:’男’},{pid:456,info:’东/西/南/北’}]
因此,建议使用另一种遍历的方式进行处理

第二、foreach遍历

使用遍历,并采用hasOwnProperty判断属性,对象拷贝等实现

  let res = [];
  let tmp = {};
  arr.forEach((v) => {
    if (!tmp.hasOwnProperty(v.pid)) {
      tmp[v.pid] = res.length;
      return res.push(Object.assign({}, v));
    }
    res[tmp[v.code]].info += v.info;
  });

  return res; //printer [{pid:123,info:'男/女/未知'},{pid:456,info:'东/西/南/北'}]

发表评论

电子邮件地址不会被公开。 必填项已用*标注