如何在Angular中获取具有唯一ProdId的最新数据？

给定原始数组：

const arr = [
  {Id:1, Date:"20/06/2023", ProdId:1},
  {Id:2, Date:"21/06/2023", ProdId:1},
  {Id:3, Date:"21/06/2023", ProdId:2},
  {Id:4, Date:"23/06/2023", ProdId:2},
  {Id:5, Date:"20/06/2023", ProdId:3}
];

需要得到每个ProdId对应的最新日期数据，目标结果：

[
  {Id:2, Date:"21/06/2023", ProdId:1},
  {Id:4, Date:"23/06/2023", ProdId:2},
  {Id:5, Date:"20/06/2023", ProdId:3}
]

实现思路 #

• 先将DD/MM/YYYY格式的日期字符串转换为可比较的Date对象（直接比较字符串会导致日期判断错误）
• 使用reduce方法按ProdId分组，分组过程中保留每个组内日期最新的条目
• 最后将分组后的对象值转换为目标数组

代码实现 #

// 辅助函数：转换DD/MM/YYYY格式的日期字符串为Date对象
const parseDate = (dateStr) => {
  const [day, month, year] = dateStr.split('/');
  return new Date(year, month - 1, day);
};

const getLatestByProdId = (arr) => {
  // 按ProdId分组，保留每个组的最新条目
  const groupedData = arr.reduce((acc, currentItem) => {
    const prodId = currentItem.ProdId;
    // 如果当前ProdId未记录，或当前条目的日期比已存条目更新
    if (!acc[prodId] || parseDate(currentItem.Date) > parseDate(acc[prodId].Date)) {
      acc[prodId] = currentItem;
    }
    return acc;
  }, {});

  // 将分组对象的值转为数组，得到最终结果
  return Object.values(groupedData);
};

// 执行并输出结果
const result = getLatestByProdId(arr);
console.log(result);

代码说明 #

1. parseDate函数：拆分日期字符串，按年-月-日顺序创建Date对象（注意JavaScript的月份从0开始，所以要减1）
2. reduce分组逻辑：遍历数组时，对每个ProdId，要么直接存入分组对象，要么对比日期后保留更新的条目
3. Object.values：提取分组对象中的所有值，组成最终的结果数组

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