[RxJS] Combination operator: zip

Posted 2020-07-13 Answer1215

CombineLatest and withLatestFrom are both AND-style combination operators. In this lesson, we will learn about zip, our last AND-style combinator. It uses the n-th value of each member Observable to produce the n-th output value.

 

If you zip two observalbe. it will wait both n-th observalbe value emit, and combie them:

• First of foo + First of bar =  first of output
• Second of foo + Second of bar = Second of output
• ...
• n-th of foo + n-th of bar = n-th of output

It will never combine: n-th of foo + (n+1)-th of bar.

 

var foo = Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘);
var bar = Rx.Observable.interval(400).take(5);

/*
(hello|)                  (foo)
---0---1---2---3---4|     (bar)
  zip((x,y) => x)
---h---e---l---l---o|
*/


//var combined = Rx.Observable.zip(foo, bar, (x,y) => x);
var combined = foo.zip(bar, (x,__)=> x);

combined.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);

  /*
 "next h"
"next e"
"next l"
"next l"
"next o"
"done" 
  */