Angular遍历年龄数组统计各年龄段人数 相同ID仅存一条实现问题

问题根源 #

• travellerCount取值为undefined：遍历过程中拿到的a是单个数字类型值，数字不存在length属性，因此取值为undefined
• 同ID重复插入：遍历中每次匹配到对应年龄段就直接执行push操作，没有校验目标数组中是否已存在相同travellerAgeRangeId的项，匹配到多少个符合条件的元素就会插入多少条重复ID的数据

修复方案 #

先通过临时对象统计各年龄段的总人数，统计完成后再统一转换成目标数组结构，避免重复插入同时保证计数准确：

// 定义年龄段和ID的映射关系，方便后续扩展维护
const AGE_RANGE_ID = {
  INFANT: 1,
  ADULT: 3
}

this.ages = [18, 20, 1];
// 临时存储各年龄段的计数
const ageCountRecord = {};

this.ages.forEach(age => {
  let currentRangeId = null;
  // 匹配所属年龄段
  if (age >= 0 && age <= 1) {
    currentRangeId = AGE_RANGE_ID.INFANT;
  } else if (age >=12 && age <= 59) {
    currentRangeId = AGE_RANGE_ID.ADULT;
  }
  // 匹配成功则更新计数
  if (currentRangeId) {
    ageCountRecord[currentRangeId] = ageCountRecord[currentRangeId] ? ageCountRecord[currentRangeId] + 1 : 1;
  }
})

// 将计数结果转换为目标数组格式
this.travel.listOfTravellerCountPerAgeRange = Object.entries(ageCountRecord).map(([rangeId, count]) => ({
  travellerAgeRangeId: Number(rangeId),
  travellerCount: count
}))

console.log(this.travel);

如果你需要保留listOfTravellerCountPerAgeRange中原有的其他年龄段数据，不直接覆盖整个数组，可以将最后一步的赋值逻辑替换为以下代码：

Object.entries(ageCountRecord).forEach(([rangeId, count]) => {
  const existed = this.travel.listOfTravellerCountPerAgeRange.find(item => item.travellerAgeRangeId === Number(rangeId))
  if (existed) {
    existed.travellerCount = count
  } else {
    this.travel.listOfTravellerCountPerAgeRange.push({
      travellerAgeRangeId: Number(rangeId),
      travellerCount: count
    })
  }
})

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