Angular中如何将两个Observable合并为关联结构的对象数组？

首先我们需要通过RxJS操作符先收集两个流的全量数据，再按关联字段匹配生成目标结构，实现代码如下：

import { from, forkJoin } from 'rxjs';
import { map, toArray } from 'rxjs/operators';

// 源Observable定义
const student$ = from([
  {id: 1, name: "Alex"},
  {id: 2, name: "Marry"},
]).pipe(toArray());

const address$ = from([
  {id: 1, location: "Chicago", sid: 1},
  {id: 2, location: "Florida", sid: 2},
]).pipe(toArray());

// 合并处理逻辑
const studentAddress$ = forkJoin([student$, address$]).pipe(
  map(([students, addresses]) => {
    // 按sid对地址分组，提升匹配效率
    const addressMap = addresses.reduce((result, addr) => {
      !result[addr.sid] && (result[addr.sid] = []);
      result[addr.sid].push(addr);
      return result;
    }, {} as Record<number, typeof addresses>);

    // 遍历学生匹配对应地址生成目标结构
    return students.map(student => ({
      ...student,
      address: addressMap[student.id] ?? []
    }));
  })
);

// 订阅获取最终结果
studentAddress$.subscribe(result => {
  const studentAddress = result;
  console.log(studentAddress);
});

逻辑说明 #

• toArray操作符用于将from创建的逐个发射元素的Observable，转换为一次性发射全量数组的Observable，方便批量处理数据
• forkJoin会等待两个传入的Observable都完成后，同时发射两个流的最终结果，适合这种需要两个数据集都齐全后再关联的场景
• 先对地址数组按关联字段sid分组，避免后续匹配地址时重复遍历数组，数据量较大时可以明显提升性能
• 最后遍历学生数组，按学生id匹配分组后的地址，生成目标结构，同时兼容无对应地址的边界场景，无匹配时address字段为空数组

内容的提问来源于stack exchange，提问作者Siful Islam Ove