[RxJS] Combination operator: withLatestFrom

Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLatestFrom, another AND-style combination operator, and how it works essentially as map() operator, with some combination properties.

var foo = Rx.Observable.interval(400)
.zip(Rx.Observable.of(‘h‘, ‘e‘, ‘l‘, ‘l‘, ‘o‘), (__, x) => x);
var bar = Rx.Observable.interval(300)
.zip(Rx.Observable.of(0,1,1,0,0,1,0,0,1), (__ ,x) =>  x);

/*
----h----e----l----l----o|     (foo)
--0--1--1--0--0--1--0--0--1|   (bar)
  withLatestFrom((c,n) => n === 1 ? c.toUpperCase() : c.toLowerCase())
----h----E----l----L----o|
*/

var combined = foo.withLatestFrom(bar, (c,n) => n === 1 ? c.toUpperCase() : c.toLowerCase());

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"
  */

The foo is the main stream, when foo emit each time, it will take the latest value from bar, if the value from bar is 1, then convert foo to upcase string, otherwise lower case string.

时间： 2024-10-10 02:07:31

[RxJS] Combination operator: withLatestFrom的相关文章

[RxJS] Combination operator: zip

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 obser

[RxJS] Transformation operator: scan

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 a

[RxJS] Transformation operator: buffer, bufferCount, bufferTime

This lesson will teach you about another horizontal combination operator: buffer and its variants. Buffer groups consecutive values together, emitting the output as an array. The buffer variants and their arguments allow to specify when to close the

[RxJS] Connection operator: multicast and connect

We have seen how Subjects are useful for sharing an execution of an RxJS observable to multiple observers. However, this technique requires some laborious setting up. In this lesson we will learn about the multicast() operator which helps solve the s

[RxJS] Utility operator: do

We just saw map which is a transformation operator. There are a couple of categories of operators, such as filtering, combination, flattening, etc. One of these categories is the utility operators. The most important utility operator is do, useful fo

[RxJS] Creation operator: of()

RxJS is a lot about the so-called "operators". We will learn most of the important operators, one by one. In this lesson, we will see our first creation operator: of(). var foo = Rx.Observable.of(42, 100, 200); // var bar = Rx.Observable.create(

[RxJS] Transformation operator: map and mapTo

We made our first operator called multiplyBy, which looks a bit useful, but in practice we don't need it because it's too specific: it only does simple multiplication on numbers. In this lesson we will see how the map() operator is useful for any cal

[RxJS] Combination operators: concat, startWith

Some Observables may complete, and we may want to append another Observable to the one which just completed. This lesson teaches you how to use the concat() operator for either appending or prepending, and how the shortcut operator startWith() is an

[RxJS] Transformation operator: repeat

Operator repeat() is somewhat similar to retry(), but is not for handling operators. In this lesson we learn how repeat works. var foo = Rx.Observable.interval(500) .zip(Rx.Observable.of('a','b','c','d'), (x,y)=>y); var bar = foo.map(x => x.toUpperC