7.Operators操作函数


七.Operators 操作函数

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

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

Operator 是什么样的

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 .


文章作者: 罗紫宇
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 罗紫宇 !
  目录