RxJS in 30 Days (08) RxJS in 30 Days – take, first, takeUntil, concatAll]github.com/ShaofeiZi/3…

Today is a beautiful Christmas, I wish readers a merry Christmas! To help you spend Christmas with your family, let’s introduce a few operators.

Operators

skip

Operator: skip: operator: skip: operator: skip: operator: skip: operator: skip: operator: skip: operator: skip

var source = Rx.Observable.interval(1000);
var example = source.skip(3);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});/ / 3
/ / 4
/ / 5...Copy the code

JSBin | JSFiddle

The one that started at 0 will now start at 3, but remember that the wait time for the original element is still there, which means that the first element obtained in this example needs to wait for 4 seconds, as shown in the Marble Diagram below.

source : ---0---- 1---2 ----- 3---4 ----- 5-... skip(3)
example: ------------------- 3---4 ----- 5-...Copy the code

takeLast

In addition to taking the first few, we can also take the last few backwards, as shown in the following example:

var source = Rx.Observable.interval(1000).take(6);
var example = source.takeLast(2);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});/ / 4
/ / 5
// completeCopy the code

So we took the first six elements, and then we took the last two. Therefore, 4, 5, complete will be sent in the end. One important point here is that takeLast must wait until the whole Observable completes (complete) to know the final elements and send them synchronously. The Marble Diagram is shown as follows

source : ---0---- 1---2 ----- 3---4 ----- 5|
                takeLast(2)
example: ------------------------------(45) |Copy the code

After seeing takeLast, wait until the original Observable is complete before sending 4, 5, and complete synchronously.

last

Just like take(1), we have a simplified version of takeLast(1), which is last() to get the last element.

var source = Rx.Observable.interval(1000).take(6);
var example = source.last();

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});/ / 5
// completeCopy the code

The Marble Diagram is shown below

source : ---0---- 1---2 ----- 3---4 ----- 5|
                    last()
example: ------------------------------(5) |Copy the code

concat

Concat can combine multiple Observable instances into one, as shown in the following example

var source = Rx.Observable.interval(1000).take(3);
var source2 = Rx.Observable.of(3)
var source3 = Rx.Observable.of(4.5.6)
var example = source.concat(source2, source3);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});/ / 0
/ / 1
/ / 2
/ / 3
/ / 4
/ / 5
/ / 6
// completeCopy the code

JSBin | JSFiddle

Like concatAll, it must wait for the previous Observable to complete before proceeding to the next observable, as shown in the Marble Diagram below.

source : ---0---- 1---2 -|
source2: (3)|
source3: (456)|
            concat()
example: ---0---- 1---2 -(3456) |Copy the code

Concat can also be used as a static method

var source = Rx.Observable.interval(1000).take(3);
var source2 = Rx.Observable.of(3);
var source3 = Rx.Observable.of(4.5.6);
var example = Rx.Observable.concat(source, source2, source3);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});Copy the code

JSBin | JSFiddle

startWith

StartWith fills the element to be sent at the beginning of an Observable, sort of like concat, but the parameter is not an Observable but the element to be sent

var source = Rx.Observable.interval(1000);
var example = source.startWith(0);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});/ / 0
/ / 0
/ / 1
/ / 2
/ / 3...Copy the code

Here you can see that we inserted a 0 at the beginning of the source so that Example immediately sends a 0 at the beginning, as shown in the Marble Diagram below

source : ---0---- 1---2 ----- 3-... startWith(0)
example: (0-0---- 1---2 ----- 3-...Copy the code

Remember that the startWith value is issued synchronously at the beginning. This operator is often used to store the initial state of the program!

merge

Merges merge Observables like concat, but they are very different in behavior!

Let’s go straight to the example

var source = Rx.Observable.interval(500).take(3);
var source2 = Rx.Observable.interval(300).take(6);
var example = source.merge(source2);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});/ / 0
/ / 0
/ / 1
/ / 2
/ / 1
/ / 3
/ / 2
/ / 4
/ / 5
// completeCopy the code

JSBin | JSFiddle

It can be seen from the above that merge processes multiple Observables simultaneously, which is completely different from concat processing one Observable at a time. Since simultaneous processing becomes more complicated, Marble Diagram can be used to explain it better.

source : ---0---- 1---2 -|
source2: -0-- 1-2 --- 3-4 --- 5|
            merge()
example: -0- 01-- 21- 3--(24) -- 5|Copy the code

Here you can see that the Example after the merge runs both source and source2 in chronological order. When the merge happens, the data is sent synchronously (the merged one follows). The merge ends when both Observables end.

Merge can also be used as a static method

var source = Rx.Observable.interval(500).take(3);
var source2 = Rx.Observable.interval(300).take(6);
var example = Rx.Observable.merge(source, source2);

example.subscribe({
    next: (value) = > { console.log(value); },
    error: (err) = > { console.log('Error: ' + err); },
    complete: (a)= > { console.log('complete'); }});Copy the code

The merge of logic is a bit like the OR (| |), one is that when two observables are always trigger can be treated, this is very common in more than one button is part of the same behavior.

For example, a movie player has two buttons, one to pause (II) and the other to end the playback (port). Both buttons have the same behavior: the movie will be stopped, but ending the playback will bring the movie back to 00 seconds. Then we can merge the events of the two buttons to handle the movie pause.

var stopVideo = Rx.Observable.merge(stopButton, endButton);

stopVideo.subscribe((a)= > {
    // Pause the movie
})Copy the code

Today’s summary

The six Operators introduced today are easy to use at ordinary times and will be encountered again in our examples. I hope readers can try these methods for themselves and be more impressed when they use them later!

I wonder if readers have learned anything today? If you have any questions, feel free to leave a comment below. Thank you.