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 easy way of prepending values to an Observable.

 concat(observalbe): wait until the first observalbe complete than append the scond observable result.

var foo = Rx.Observable.interval(100).take(7);
var more = Rx.Observable.of(10,11,12,13,14); /*
--0--1--2--3--4--5--6--7-...
take(7)
(10,11,12,13,14|) (more)
--0--1--2--3--4--5--6| (foo)
concat
--0--1--2--3--4--5--6|(10,11,12,13,14)|
*/ var bar = foo.concat(more); bar.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
); /*
"next 0"
"next 1"
"next 2"
"next 3"
"next 4"
"next 5"
"next 6"
"next 10"
"next 11"
"next 12"
"next 13"
"next 14"
"done"
*/

Observable.concat(first$, second$): static way to concat:

var foo = Rx.Observable.interval(100).take(7);
var more = Rx.Observable.of(10,11,12,13,14); /*
--0--1--2--3--4--5--6--7-...
take(7)
(10,11,12,13,14|) (more)
--0--1--2--3--4--5--6| (foo)
concat
--0--1--2--3--4--5--6|(10,11,12,13,14)|
*/ var bar = Rx.Observable.concat(foo, more); bar.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
);

The code return the same result as the code showing before.

startWith(value):

var foo = Rx.Observable.interval(100).take(7);

/*
--0--1--2--3--4--5--6--7-...
take(7)
--0--1--2--3--4--5--6| (foo)
startWith('more')
('more')--0--1--2--3--4--5--6|
*/ var bar = foo.startWith('more'); bar.subscribe(
function (x) { console.log('next ' + x); },
function (err) { console.log('error ' + err); },
function () { console.log('done'); },
); /*
"next more"
"next 0"
"next 1"
"next 2"
"next 3"
"next 4"
"next 5"
"next 6"
"done"
*/

[RxJS] Combination operators: concat, startWith的更多相关文章

  1. RxSwift 系列(三) -- Combination Operators

    RxSwift 系列(三) -- Combination Operators 前言 本篇文章将要学习如何将多个Observables组合成一个Observable. Combination Opera ...

  2. [RxJS] Combination operator: zip

    CombineLatest and withLatestFrom are both AND-style combination operators. In this lesson, we will l ...

  3. Rxjs常用operators

    本文使用的是angular6内置的rxjs,版本号为6.3.3 concat 通过顺序地发出多个 Observables 的值将它们连接起来,一个接一个的. 参数: 名称 类型 属性 描述 other ...

  4. [RxJS] Filtering operators: distinct and distinctUntilChanged

    Operator distinct() and its variants are an important type of Filtering operator. This lessons shows ...

  5. [RxJS] Transformation operators: debounce and debounceTime

    Debounce and debounceTime operators are similar to delayWhen and delay, with the difference that the ...

  6. [RxJS] Transformation operators: delay and delayWhen

    This lessons teaches about delay and delayWhen: simple operators that time shift. delay(number | dat ...

  7. [RxJS] Combination operator: withLatestFrom

    Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLate ...

  8. [RxJS] Combination operator: combineLatest

    While merge is an OR-style combination operator, combineLatest is an AND-style combination operator. ...

  9. [RxJS] Filtering operators: takeLast, last

    Operators take(), skip(), and first() all refer to values emitted in the beginning of an Observable ...

随机推荐

  1. 设置服务器远程连接mysql

    一直单人开发所以没有考虑过这方面,到新公司要做合作开发,所以要进行设置,然后开始自己搞 下面把过程罗列一下: 1)由于使用的云服务器 ,所以上面都配置好了,直接配置了mysql的命令行输入密码就可以进 ...

  2. Tomcat架构(三)

    嵌套组件 这些组件是针对Tocmat做的特定实现,他们的主要目的是使各种Tomcat容器可以完成各自的工作. 1.阀(Valve) valve是处理元素,它可以被包含在每个Tomcat容器的处理路径中 ...

  3. lc面试准备:Repeated DNA Sequences

    1 题目 All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: &quo ...

  4. Oracle 搜集统计信息

    常用的统计信息收集脚本: 非分区表: BEGIN   DBMS_STATS.GATHER_TABLE_STATS(ownname          => 'SCOTT',             ...

  5. Traffic Manager:Azure中国版 正式发布

     我们很高兴地宣布Azure Traffic Manager 现已面向中国版Azure正式发布.此版本现已投入生产,由企业 SLA支持,随时可用于生产场景中. 借助Azure Traffic Ma ...

  6. linux apache模块的安装

    最近,想使用apache的mod_status来查看一下apache的服务器状态,就自己安装了一下mod_status,以前觉得好像很难的东西其实很简单. 第一步, 去http://httpd.apa ...

  7. 创建一个基本的Windows应用程序

    以下是包含的头文件 #define WIN32_LEAN_AND_MEAN // 指示编译器不要包含我们并不需要的MFC内容 #include <windows.h> // 包含所有的Wi ...

  8. HDOJ/HDU 2560 Buildings(嗯~水题)

    Problem Description We divide the HZNU Campus into N*M grids. As you can see from the picture below, ...

  9. UVA1416 Warfare And Logistics

    UVA1416 Warfare And Logistics 链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=36232 [ ...

  10. C# Dictionary的xml序列化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...