RxJS Observable内数据操作写法与最佳实践咨询

首先直接回答核心疑问：在Observable操作符内通过数组方法处理数据是完全符合良好开发实践的。RxJS操作符的本职工作就是对流内的数据做转换、筛选、组合，只要你在操作符内执行的是无副作用的纯数据转换逻辑，不管是用数组原生方法还是其他工具函数做处理，都没有问题。

你当前的代码可以正常运行，但存在三个需要修正的问题：

• 直接修改上游接口返回的原profile对象：getProfileById返回的是对象引用，你直接重写它的myTrades属性会产生隐式副作用，其他复用这个接口返回值的逻辑会拿到被篡改后的数据，容易引发难以排查的bug。
• 匹配逻辑存在性能损耗：用Array.includes反复遍历判断ID存在的时间复杂度是O(n*m)，当交易列表或用户绑定的交易ID数量较大时会有不必要的性能开销。
• 匹配结果顺序不符合预期：当前写法返回的交易名称顺序和profile.myTrades里原ID的顺序不一致，是按全量交易列表的顺序排列的，容易出现展示顺序和业务预期不符的问题。

另外你用combineLatest并行发起两个无依赖关系的接口请求这个思路是对的，比串行请求的加载性能更好。

优化点主要是规避原对象修改、提升匹配性能、保证返回顺序和原ID一致：

this.currentSwapOwner$ = combineLatest([
  this.userService.getProfileById(this.ownerId),
  this.tradeService.getTrades()
]).pipe(
  map(([profile, trades]) => {
    // 构建ID-交易名称映射表，单条查询时间复杂度O(1)，同时保证返回顺序和原ID顺序一致
    const tradeNameMap = new Map(
      trades.map(trade => [trade._id, trade.name])
    );

    // 按原myTrades的ID顺序匹配对应名称，过滤掉找不到对应名称的无效ID
    const displayTradeNames = profile.myTrades
      .map(tradeId => tradeNameMap.get(tradeId))
      .filter((name): name is string => Boolean(name));

    // 返回全新的对象，不修改上游返回的原profile引用
    return {
      ...profile,
      myTrades: displayTradeNames
    };
  })
);

• 如果全量交易列表会在多个页面/组件中使用，可以在tradeService层对getTrades()的结果加缓存，避免重复发起请求拉取相同数据。
• 如果你需要处理接口报错的场景，可以在pipe中追加catchError操作符处理异常，给视图层返回友好的错误提示。
• 如果业务上需要展示加载态，可以结合startWith给流追加初始加载状态，让视图层更早反馈加载进度。

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