RXJS条件操作员简化

Question

我有此工作代码：

import { timer, take, pipe, map, mergeMap, iif, of } from 'rxjs'

const double = () => {
  return pipe(
    map((x: number) => x * 2)
  )
} 

const triple = () => {
  return pipe(
    map((x: number) => x * 3)
  )
}

timer(0, 1000).pipe(
  take(4),
  mergeMap(x => iif(() => x <= 1, of(x).pipe(double()), of(x).pipe(triple())))
).subscribe(x => {
  console.log('output', x)
})

这是工作stackblitz 。

按预期的输出是：

output 0
output 2
output 6
output 9

只有一个问题。这条线很冗长：

mergeMap(x => iif(() => x <= 1, of(x).pipe(double()), of(x).pipe(triple())))

可以简化这条线吗？

Answer 1

与其进行 double 和 triple 自定义操作员，您可以简单地使其功能，只需使用 map ：

const double = (x: number) => x * 2;
const triple = (x: number) => x * 3;

timer(0, 1000).pipe(
  take(4),
  map(x => (x <= 1 ? double(x) : triple(x)))
);

如果修改来自可观察的源，您可以使用 Mergemap ：

const double$ = (x: number) => of(x * 2);
const triple$ = (x: number) => of(x * 3);

timer(0, 1000).pipe(
  take(4),
  mergeMap(x => x <= 1 ? double$(x) : triple$(x))
);

stackblitz

Answer 2

它可以进一步归结为

timer(0, 1000).pipe(
  take(4),
  map(x => x*(x <= 1?2 : 3))
);