[RxJS] Changing Behavior with MapTo

最新推荐文章于 2024-10-20 21:53:43 发布

weixin_30339969

最新推荐文章于 2024-10-20 21:53:43 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5260054.html

本文介绍如何利用RxJS中的mapTo与scan操作符来实现对数据流中数据的定制化处理，包括如何通过mapTo传递函数到scan中进行更灵活的数据控制，并给出具体的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

You often need streams to trigger different behaviors on the data based on which streams triggers. This lessons shows how to use mapTo to pass functions into the scan operator and have completed control over you data.

Current Code:

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');

const start$ = Observable.fromEvent(startButton, 'click');
const interval$ = Observable.interval(1000);
const stop$ = Observable.fromEvent(stopButton, 'click');

const intervalThatStops$ = interval$
    .takeUntil(stop$);

const inc = (acc) => ({count: acc.count + 1}); // one line arrow function only ruturn object need ()

const data = {count: 0};

start$
    .switchMapTo(intervalThatStops$)
    .startWith(data)
    .scan( inc )
    .subscribe((x)=> console.log(x));

Everytime the number 1,2,3... will be passed to the scan function.

If we want scan() method be fixable enought, we can use mapTo() method, which accecpts a function to increase the number. Then we need to modify the scan() function, now everytime it receive is the function return from mapTo, not a number anymore.

start$
    .switchMapTo(intervalThatStops$)
    .mapTo( inc )
    .startWith(data)
    .scan( (acc, curr) => {
      console.log(curr); //(acc) => ({count: acc.count + 1})return curr(acc)
     } )
    .subscribe((x)=> console.log(x));

Now we get full control over the scan() method, we can let it reset after 10:

const Observable = Rx.Observable;

const startButton = document.querySelector('#start');
const stopButton = document.querySelector('#stop');

const start$ = Observable.fromEvent(startButton, 'click');
const interval$ = Observable.interval(200);
const stop$ = Observable.fromEvent(stopButton, 'click');

const intervalThatStops$ = interval$
    .takeUntil(stop$);

const data = {count: 0};
const inc = (acc) => { return Object.assign({}, data, {count: count + 1})};  // avoid modifying data object
const resetAfterTen = (acc) => {
   if(acc.count == 10){
      return data;
   }else{
     return Object.assign({}, acc, {count: acc.count + 1})
   }
}



start$
    .switchMapTo(intervalThatStops$)
    .mapTo( resetAfterTen )
    .startWith(data)
    .scan( (acc, curr) => {
       return curr(acc)
     } )
    .subscribe((x)=> console.log(x));