RXJS：如何仅对首次发射的值执行映射，其余值直接传递？

当然有办法啦！RxJS 本身就提供了优雅的操作符组合方案，完全不需要额外定义变量来跟踪是否是第一个值，下面给你两种常用的实现方式：

方案一：拆分流后合并（推荐，可读性更高） #

我们可以把源流拆分成「第一个值」和「剩余所有值」两个子流，分别处理后再合并，完美保持原流的发射顺序：

import { merge } from 'rxjs';
import { take, skip, map } from 'rxjs/operators';

// 处理第一个值：取第一个并执行映射转换
const firstTransformed$ = this.sourceStream$.pipe(
  take(1),
  map(data => data['some transformation']) // 替换成你的具体转换逻辑
);

// 处理后续值：跳过第一个，直接传递原始数据
const restPassed$ = this.sourceStream$.pipe(skip(1));

// 合并两个流，按原顺序发射数据
merge(firstTransformed$, restPassed$)
  .pipe(takeUntil(this.onDestroy$))
  .subscribe(data => {
    // 这里写你的订阅处理逻辑
  });

原理说明 #

• take(1)：只取源流的第一个发射值，完成后自动取消订阅该子流
• skip(1)：跳过源流的第一个值，接收之后所有的发射值
• merge：将两个子流合并，保证数据发射顺序和原流一致

方案二：使用scan操作符（单pipe链实现） #

如果希望把所有逻辑放在一个pipe链里，可以用scan操作符内部维护状态，判断是否是首次发射：

import { scan, map } from 'rxjs/operators';

this.sourceStream$.pipe(
  takeUntil(this.onDestroy$),
  // scan维护内部状态：标记是否是第一个值
  scan((state, currentData) => {
    if (state.isFirst) {
      // 首次值执行转换
      return {
        value: currentData['some transformation'],
        isFirst: false
      };
    } else {
      // 后续值直接传递
      return {
        value: currentData,
        isFirst: false
      };
    }
  }, { isFirst: true }), // 初始状态：标记为首次
  // 提取最终需要的数据
  map(result => result.value)
).subscribe(data => {
  // 这里写你的订阅处理逻辑
});

原理说明 #

• scan会携带一个状态对象，初始时标记isFirst: true
• 第一次处理数据时执行转换，并把状态改为isFirst: false
• 后续所有数据都直接传递，状态不再变化
• 最后用map提取出实际需要的业务数据

两种方案都不需要你自己定义外部变量来跟踪状态，完全利用RxJS的操作符特性实现需求，推荐优先使用方案一，代码更清晰易懂~

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