一、创建类操作符
创建类操作符是连接传统编程和响应式编程的强梁
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图:
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:原始流和转换后的流发生的时间点一样。
本文作者,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处: 有问题欢迎与我讨论,共同进步。