RxJS操作符（一）

https://rxmarbles.com/

图解rxjs: https://reactive.how/

rx相当于js里面的Loaddash或者underscore之类的。

一、创建类操作符

创建类操作符是连接传统编程和响应式编程的强梁

from: 可以把数组、Promise、以及Iterable转化为Observable。

fromEvent: 可以把事件转化为Observable

of :接受一系列的数据，并把它们emit出去（不一定是数组）

1、fromEvent

把length的keyup事件转化为Observable对象。

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value');

2、from

输入数组，出来一个一个元素。

发射出来很快，直接取到最后一个值。

const length$=Rx.Observable.from([1,2,3,4]);  

3、of

把对象转化为Observable

const length$=Rx.Observable.of({id:1,value:20}); 

计算时候拿l.value计算

const area$=Rx.Observable.combineLatest(length$,width$,(l,w)=>{return l.value*w});

可以把任意多个，可以是不一样的对象转化

const length$=Rx.Observable.of({id:1,value:20},{key:'xx',value:'blalala'}); 

二、转换类操作符

• map
• mapTo
• pluck

mapTo和pluck都是map的一种变形。

Marbles图：http://rxmarbles.com/

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value');
const width$ =Rx.Observable.fromEvent(width,'keyup').pluck('target','value');

等价于

const length$ =Rx.Observable.fromEvent(length,'keyup').map(event=>event.target.value);
const width$ =Rx.Observable.fromEvent(width,'keyup').map(event=>event.target.value);

pluck是map的简化用法。

mapTo

mapTo成一个固定值，常量，

使用场景：用于不关心值，button的click事件，只需要知道发生了点击事件。点击一次一个1，最后处理可能是累加起来。

const length$ =Rx.Observable.fromEvent(length,'keyup').mapTo(1);
const width$ =Rx.Observable.fromEvent(width,'keyup').mapTo(2);

相当于是：两个序列的常数流

const length$ =Rx.Observable.fromEvent(length,'keyup').map(_=>1);
const width$ =Rx.Observable.fromEvent(width,'keyup').map(_=>2);

只关心事件发生了，不关心值。

map:原始流和转换后的流发生的时间点一样。 

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：https://www.cnblogs.com/starof/p/9114763.html 有问题欢迎与我讨论，共同进步。