Rxjs:Operators操作符

前面讲完了用于创建Observable实例的 operator 内置操作函数,

接下来要讲关于转换(Transformation),过滤(Filter),合并(Combination)的操作函数.

Operators 就是 Observable 内置的操作函数 ,例如像是 map, filter, contactAll...

重点是,这些函数内部都会创建一个新 Observable 对象并返回,以实现链式调用.

其实和promise 的思想几乎一样,把视为Observable,subscribe是为then 一切都好理解了

例如下面这样的简单写一个map方法

function map(callback) {
    return Rx.Observable.create((observer) => {
        return this.subscribe(
            (value) => { 
                try{
                    observer.next(callback(value));
                } catch(e) {
                    observer.error(e);
                }
            },
            (err) => { observer.error(err); },
            () => { observer.complete() }
        )
    })
}
Rx.Observable.prototype.map = map;
var people = Rx.Observable.of('Jerry', 'Anna');
var helloPeople = people.map((item) => item + ' Hello~');

helloPeople.subscribe(console.log);
// Jerry Hello~
// Anna Hello~

这里调用了 people 的map 方式, 其实内部就是使用Rx.Observable.create创建了一个新的 Observable2 ,

并传入了一个函数 (observer) => {...}, 该函数会在 Rx.Observable.create 内立即执行.

该函数立即执行并 return 了 this.subscribe ,其实就是 people.subscribe,

people.subscribe 被调用, Rx.Observable.of('Jerry', 'Anna') 执行 ,调用两次next,

也就是(value) => {...},每次 (value) => {...} 内部都调用了 Observable2 的next 方法,

并传入了 callback 也就是 (item) => item + ' Hello~'),该状态被 Observable2 记录,

然后Observable2 被 return 赋值给了 helloPeople,并调用了 subscribe 方法,

helloPeople.subscribe执行时,根据 helloPeople 记录的状态, 调用 subscribe 中传入的方法,

也就是调用了两次next ,在 helloPeople 中代表的就是 console.log,

调用 console.log ,并传入 observer.next(callback(value)) 时记录的 callback(value),

Marble diagrams 描绘observable行为的图

用 - 来代表一小段时间, 用一连串- 来代表一个Observable

-----------

用 X 来代表 Observable 执行发生错误

-----------X

用 | 来代表 Observable 执行结束

-----------|

用数字或相近的符号代表 Observable 向下传递的值

// var source = Rx.Observable.interval(1000);
----0----1----2----3--....

用 () 代表内部发生的是同步操作

// var source = Rx.Observable.of(1,2,3,4);
(1234)|

特殊: 表达使用 operator 产生的前后转换
上面是observable,中间是operator,下面是新的observable

var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 1); 

source: -----0-----1-----2-----3--...
            map(x => x + 1)
newest: -----1-----2-----3-----4--...

Operator 简单举例

map

.map(callback) 会把next调用传递过来的数值数组,进行 callback 再处理一遍

var source = Rx.Observable.interval(1000);
var newest = source.map(x => x + 2); 

newest.subscribe(console.log);
// 2
// 3
// 4
// 5..

Marble diagrams 表示:

source: -----0-----1-----2-----3--...
            map(x => x + 1)
newest: -----1-----2-----3-----4--...

mapTo

.map(x) 直接把next调用传递过来的值数组重置为 x.

var source = Rx.Observable.interval(1000);
var newest = source.mapTo(2); 

newest.subscribe(console.log);
// 2
// 2
// 2
// 2..

Marble diagrams 表示:

source: -----0-----1-----2-----3--...
            map(x => x + 1)
newest: -----2-----2-----2-----2--...

filter

.filter(callback) 直接把next调用传递过来的值数组,根据传入callback执行返回值是否为true过滤一遍.

var source = Rx.Observable.interval(1000);
var newest = source.filter(x => x % 2 === 0); 

newest.subscribe(console.log);
// 0
// 2
// 4
// 6..

Marble diagrams 表示:

source: -----0-----1-----2-----3-----4-...
            filter(x => x % 2 === 0)
newest: -----0-----------2-----------4-...

总结

Operators 就是 Observable 内置的操作函数,每个这种函数都会返回一个新的 Observable

Marble diagrams 各种符号的含义

认识 Observable 的几个简单 Operators, map mapTo filter .

Rxjs:Operators操作符#

Marble diagrams 描绘observable行为的图#

Operator 简单举例#

总结#

Rxjs:Operators操作符

Marble diagrams 描绘observable行为的图

Operator 简单举例

总结