Angular中对比日期数组生成等长新数组的实现方案求助

核心需求 #

给定两个字符串类型的日期数组Array1和Array2，生成对齐后的Array3和Array4：

• 两数组共有的日期在对应位置保留原值
• 仅某数组存在的日期，另一数组对应位置补空字符串
• 最终两个新数组长度一致，支持并排展示
• 兼容空数组、任意长度数组的所有场景

基础TypeScript/JavaScript实现 #

通过提取所有唯一日期并排序，遍历生成对齐数组，逻辑简洁且覆盖所有场景：

function alignDateArrays(arr1: string[], arr2: string[]): [string[], string[]] {
  // 合并去重所有日期，按字符串排序（兼容'YYYY-MM-DD'格式的日期）
  const allUniqueDates = Array.from(new Set([...arr1, ...arr2])).sort();
  
  // 生成对齐后的两个数组
  const array3 = allUniqueDates.map(date => arr1.includes(date) ? date : '');
  const array4 = allUniqueDates.map(date => arr2.includes(date) ? date : '');
  
  return [array3, array4];
}

关键逻辑说明

1. 全量日期集合：合并两个数组的所有元素，用Set去重，确保包含所有出现过的日期
2. 排序：日期字符串（如'2024-05-01'）可直接按字符串规则排序，保证顺序正确
3. 映射生成结果：遍历全量日期数组，分别检查原数组是否包含该日期，包含则保留，否则补空

RxJS响应式方案（适配Angular场景） #

如果在Angular中使用响应式数据流，可封装为Observable操作：

import { Observable, of, combineLatest, map } from 'rxjs';

function alignDateArraysRx(arr1$: Observable<string[]>, arr2$: Observable<string[]>): Observable<[string[], string[]]> {
  return combineLatest([arr1$, arr2$]).pipe(
    map(([arr1, arr2]) => {
      const allUniqueDates = Array.from(new Set([...arr1, ...arr2])).sort();
      const array3 = allUniqueDates.map(date => arr1.includes(date) ? date : '');
      const array4 = allUniqueDates.map(date => arr2.includes(date) ? date : '');
      return [array3, array4];
    })
  );
}

// 使用示例
const array1$ = of(['2024-05-01', '2024-05-03']);
const array2$ = of(['2024-05-02', '2024-05-03']);
alignDateArraysRx(array1$, array2$).subscribe(([arr3, arr4]) => {
  console.log(arr3); // 输出: ['2024-05-01', '', '2024-05-03']
  console.log(arr4); // 输出: ['', '2024-05-02', '2024-05-03']
});

优势

• 基于combineLatest，当任一输入数组的Observable发出新值时，自动重新计算对齐结果
• 完全适配Angular的响应式编程模式，可直接与组件的数据流结合

边界场景测试 #

1. 其中一个数组为空

   alignDateArrays(['2024-05-01'], []); 
   // 返回: [['2024-05-01'], ['']]
   

2. 两数组完全无重叠

   alignDateArrays(['2024-05-01'], ['2024-05-02']); 
   // 返回: [['2024-05-01', ''], ['', '2024-05-02']]
   

3. 数组长度差异较大且有重叠

   alignDateArrays(
     ['2024-05-01', '2024-05-04'], 
     ['2024-05-02', '2024-05-03', '2024-05-04']
   ); 
   // 返回: 
   // [['2024-05-01', '', '', '2024-05-04'], 
   //  ['', '2024-05-02', '2024-05-03', '2024-05-04']]
   

原代码问题分析 #

你之前的嵌套for循环逻辑仅处理了部分场景（如开头补空、中间插入），但无法覆盖数组末尾元素、空数组、完全不重叠等情况，且代码冗余、维护成本高。上述方案通过全量日期集合的方式，一次性解决所有对齐需求，逻辑清晰且易维护。

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