RxJS操作符（三）

一、过滤类操作符：debounce, debounceTime

跟时间相关的过滤

debounceTime自动完成：性能，避免每次请求都往出发

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

debounce中间传入Observable

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value').debounce(()=>{
Rx.Observable.interval()
});

时间可以是动态的，不是固定的300。

二、过滤类操作符distinct,distinctUntilChanged

distinct:只留不一样的【跟整个序列比】

整个序列中没有重复元素。

event是无尽序列，如果是对整个序列做监控，内存会越消耗越多。【隐患】

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

distinctUntilChanged:只跟前一个元素比

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

三、合并类操作符merge, concat, startWith

1、merged

merged:会交替输出两个值输出。把两个流按各自的顺序叠加成一个流。每个流的时间点在新流中都不会变。

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

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

const merged$=Rx.Observable.merge(length$,width$);

merged$.subscribe(val=>{console.log(val);area.innerHTML=val})

2、concat

concat:有前后关系。

等待第一个发射完，再输出第二个流

第一个流是个无穷序列，第二个流就不会有输出

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

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

const merged$=Rx.Observable.concat(length$,width$);

merged$.subscribe(val=>{console.log(val);area.innerHTML=val})

first$从数组得到

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

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

const first$=Rx.Observable.from([,,,])
const merged$=Rx.Observable.concat(first$,width$);

merged$.subscribe(val=>{console.log(val);area.innerHTML=val})

3、startWith

startWith:类似初始值默认值。

const first$=Rx.Observable.from([,,,]).startWith();

相当于在前面concat一个0。

往往用来赋初始值，避免一开始流没有值。

四、合并类操作符：combineLatest, withLatestFrom, zip

区别：zip有对齐的特性，withLatestFrom是以源事件流为基准

combineLatest:组成它的任何流中有新元素出现。

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

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

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

area$.subscribe(val=>{console.log(val);area.innerHTML=val})

zip:英文拉链【zip中最慢的流决定了zip最终的速度】

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

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

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

area$.subscribe(val=>{console.log(val);area.innerHTML=val})

第一个序列，先输1，删掉再输2，然后第二个序列输入3，结果为3。因为第一个序列第一个值和第二个序列第一个值相乘。

withLatestFrom:有一个主流，主流产生数据去取另一个流的最新值。

不要求成对。以第一个流为主，第一个流改变的时候才会有输出。第二个流改变并不会有输出。

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

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

const area$=length$.withLatestFrom(width$);

area$.subscribe(val=>{console.log(val);area.innerHTML=val})

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