JavaScript统计对象数组中元素出现次数的实现方案

需求说明 #

我有一个对象数组，需要生成包含新增Occurrences字段的新对象数组，该字段用于统计相同Date_Available与Country组合的出现次数。之前编写的代码在处理同日期不同国家的情况时统计错误，需要修正。

输入数组 #

const fakeJson = [
  {
    "Id": 1,
    "Name": "John",
    "Age": 32,
    "Date_Available": "2022-04-10",
    "Popularity": 99,
    "Country": "Canada"
  },
  {
    "Id": 1,
    "Name": "John",
    "Age": 32,
    "Date_Available": "2022-04-11",
    "Popularity": 99,
    "Country": "Canada"
  },
  {
    "Id": 1,
    "Name": "John",
    "Age": 32,
    "Date_Available": "2022-04-12",
    "Popularity": 99,
    "Country": "Canada"
  },
  {
    "Id": 1,
    "Name": "John",
    "Age": 32,
    "Date_Available": "2022-04-12",
    "Popularity": 99,
    "Country": "China"
  },
  {
    "Id": 1,
    "Name": "John",
    "Age": 32,
    "Date_Available": "2022-04-12",
    "Popularity": 99,
    "Country": "Canada"
  }
]

期望输出 #

const resultJSON = [
  {
    "Date_Available": "2022-04-10",
    "Popularity": 99,
    "Country": "Canada",
    "Occurrences" : 1
  },
  {
    "Date_Available": "2022-04-11",
    "Popularity": 99,
    "Country": "Canada",
    "Occurrences" : 1
  },
  {
    "Date_Available": "2022-04-12",
    "Popularity": 99,
    "Country": "Canada",
    "Occurrences" : 2
  },
  {
    "Date_Available": "2022-04-12",
    "Popularity": 99,
    "Country": "China",
    "Occurrences" : 1
  }
]

错误代码分析 #

你之前的代码核心问题是：没有用Date_Available和Country的组合作为唯一标识，而是单独用日期或国家作为映射键，导致同日期不同国家的组合被错误合并，统计逻辑混乱。

let countNameMapping = {};
let finalArr = [];

for(let i = 0; i < fakeJson.length; i++){
  let tempObj = {Country:fakeJson[i].Country, Date_Available: fakeJson[i].Date_Available, occurence: 1};
  let countryName = fakeJson[i].Country;
  let date = fakeJson[i].Date_Available;
  if(countNameMapping[date] === undefined){
    countNameMapping[countryName] = tempObj;
  } else {
    countNameMapping[date].occurence += 1;
  }
}

for(let k in countNameMapping){
  finalArr.push(countNameMapping[k])
}

console.log(finalArr)

正确解决方案 #

我们可以将Date_Available和Country拼接成唯一键（用|分隔避免冲突），以此作为映射对象的键来统计次数，最后将映射值转为数组即可：

const countMapping = {};

// 统计每个日期+国家组合的出现次数
fakeJson.forEach(item => {
  const key = `${item.Date_Available}|${item.Country}`;
  if (countMapping[key]) {
    countMapping[key].Occurrences += 1;
  } else {
    countMapping[key] = {
      Date_Available: item.Date_Available,
      Popularity: item.Popularity,
      Country: item.Country,
      Occurrences: 1
    };
  }
});

// 将映射对象转为目标数组
const resultJSON = Object.values(countMapping);

console.log(resultJSON);

这段代码会正确统计每个Date_Available与Country组合的出现次数，生成符合预期的结果数组。

内容的提问来源于stack exchange，提问作者JustinLL99