RxJS mergeScan 与扫描

Question

我正在学习 RxJS，我无法弄清楚 RxJS 的 scan 和 mergeScan 之间的区别。两个例子：

const click$ = fromEvent(document, 'click');
const one$ = click$.pipe(mapTo(1));
const seed = 0;
const count$ = one$.pipe(
  mergeScan((acc, one) => of(acc + one), seed),
);
count$.subscribe(x => console.log(x));

...和

const click$ = fromEvent(document, 'click');
const one$ = click$.pipe(mapTo(1));
const seed = 0;
const count$ = one$.pipe(scan((acc, one) => (acc + one), seed));
count$.subscribe((x) => console.log(x));

...产生相同的结果（鼠标点击次数）——那有什么区别呢？他们都需要吗？

Answer 1

mergeScan 可以在内部执行 observable 但 scan 不能，一个典型的用例是像 inifite scroll 那样你想连续调用端点

const click$ = fromEvent(loadmore, 'click');
const count$ = click$.pipe(
  mergeScan((acc, one) => httpGetPage(acc.pageCusor+1).pipe(map(res=>{
    return {pageCusor:pageCusor++,contet.concat(res)}
})), {pageCursor:0,content:[]}),
);

要检查，您可以在 scan 示例中尝试 console.log 并尝试 return a of(value)，它将显示 Observable

const count$ = one$.pipe(scan((acc, one) => of(acc + one), seed));
count$.subscribe((x) => console.log(x));

Answer 2

如文档所述

It's like scan, but the Observables returned by the accumulator are merged into the outer Observable.

累加器函数 return mergeScan 的类型应该是 ObservableInput

mergeScan 1st 执行 scan 操作，然后订阅由累加器函数 return 编辑的内部可观察对象并将其存储 acc 并发出相同的内容。

如果您在此行中将 mergeScan` 替换为 scan 并记录如下

scan((acc, one) => {
    console.log("acc ",acc);
    return of(acc + one);
  }, seed),

您将看到 acc 值存储为 Observable。日志将是这样的 acc Observable {_subscribe: ƒ}

但是如果你使用 maergeScan 我们会看到类似 acc 1

的日志

这个故事的寓意是，如果你的累加器函数 return 是可观察的，你必须使用 mergeScan 否则 scan 就可以了

RxJS mergeScan 与扫描

RxJS mergeScan vs scan

javascript

rxjs