[RxJS] Transformation operator: scan

Posted 2020-07-13 Answer1215

All of the combination operators take two or more observables as input. These operators may also be alternatively called "vertical combination operators", because of how they work in a marble diagram. Next, we will learn about scan(), which is an important "horizontal combination operator".

var click$ = Rx.Observable.fromEvent(document.querySelector("#btn"), ‘click‘);

/*

----ev-----ev---ev----ev----ev----..
    mapTo(1)
----1 -----1 ---1 ----1 ----1-----..
    scan( (acc, curr) => acc + curr, 0)
----1------2----3-----4-----5-----..

*/

var clicks$ = click$
.mapTo(1)
.scan( (acc, curr) => {
  return acc + curr
}, 0);

var sub = clicks$.subscribe(
  (x) => console.debug("Total Clicks: " + x),
  (err) => console.error(err),
  () => console.info("DONE")
)

 

var foo$ = Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘)
  .zip(Rx.Observable.interval(500), (c, t) => c);

var bar$ = foo$.scan( (acc, curr) => {
  return acc + curr;
}, ‘‘);

/*

-----h-----e-----l-----l------o|        (foo)
    scan( (acc, curr) => acc + curr, ‘‘)
-----h-----(he)--(hel)-(hell)-(hello|)  (bar)
  
*/

var sub = bar$.subscribe(
  (x) => console.debug(x),
  (err) => console.error(err),
  () => console.info("DONE")
);
/**

"h"
"he"
"hel"
"hell"
"hello"
"DONE"
*/