Angular 12（TypeScript）实现日期数组按年份分组的开发需求

步骤1：定义TS类型 #

interface DateRange {
  start: string;
  end: string;
}

interface GroupedRange {
  yearLabel: string;
  items: {
    periodLabel: string;
    dayList: string;
  }[];
}

步骤2：实现核心处理函数 #

// 月份缩写映射
const MONTH_ABBR = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 补零工具
const padZero = (num: number) => num.toString().padStart(2, '0');

// 生成两个日期间的所有日期
const generateDateList = (start: Date, end: Date): Date[] => {
  const dates: Date[] = [];
  const current = new Date(start);
  while (current <= end) {
    dates.push(new Date(current));
    current.setDate(current.getDate() + 1);
  }
  return dates;
};

// 处理原始数组返回分组结果
const groupDateRanges = (rawList: DateRange[]): GroupedRange[] => {
  // 先按开始日期的年份分组
  const yearMap = new Map<number, GroupedRange['items']>();

  rawList.forEach(range => {
    const startDate = new Date(range.start);
    const endDate = new Date(range.end);
    // 取开始日期的年份作为分组key
    const year = startDate.getFullYear();
    
    // 生成时间段标签
    const startLabel = `${MONTH_ABBR[startDate.getMonth()]} ${startDate.getDate()}`;
    const endLabel = `${MONTH_ABBR[endDate.getMonth()]} ${padZero(endDate.getDate())}`;
    const periodLabel = `${startLabel} – ${endLabel}`;

    // 生成日期列表字符串
    const dateList = generateDateList(startDate, endDate);
    const dayList = dateList.map(d => d.getDate().toString()).join(',');

    // 存入年份分组
    if (!yearMap.has(year)) {
      yearMap.set(year, []);
    }
    yearMap.get(year)!.push({ periodLabel, dayList });
  });

  // 按年份倒序返回结果
  return Array.from(yearMap.entries())
    .sort((a, b) => b[0] - a[0])
    .map(([year, items]) => ({
      yearLabel: year.toString(),
      items
    }));
};

步骤3：调用方法输出结果 #

// 你的原始数据
const rawData: DateRange[] = [
  {start: "2021-08-11T20:00:00+00:00", end: "2021-08-17T20:00:00+00:00"},
  {start: "2021-07-04T20:00:00+00:00", end: "2021-07-08T20:00:00+00:00"},
  {start: "2021-06-07T20:00:00+00:00", end: "2021-06-13T20:00:00+00:00"},
  {start: "2021-04-30T20:00:00+00:00", end: "2021-05-06T20:00:00+00:00"},
  {start: "2020-05-31T20:00:00+00:00", end: "2021-06-13T20:00:00+00:00"},
  {start: "2019-05-31T20:00:00+00:00", end: "2019-06-13T20:00:00+00:00"},
];

const result = groupDateRanges(rawData);

// 按要求格式打印
result.forEach(group => {
  console.log(group.yearLabel);
  group.items.forEach(item => {
    console.log(item.periodLabel);
    console.log(item.dayList);
    console.log(); // 空行分隔
  });
});

注意事项 #

如果需要和示例输出的日期完全匹配（比如原始数据2021-06-07T20:00+00:00对应显示6月6日），把代码中所有getFullYear、getMonth、getDate替换为对应UTC方法getUTCFullYear、getUTCMonth、getUTCDate即可，和输入的ISO日期字符串时区保持一致。

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