RxJS操作符（三）

一、過濾類操作符：debounce, debounceTime

跟時間相關的過濾

debounceTime自動完成：性能，避免每次請求都往出發

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

debounce中間傳入Observable

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

時間可以是動態的，不是固定的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([1,2,3,4])
const merged$=Rx.Observable.concat(first$,width$);

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

3、startWith

startWith:類似初始值默認值。

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

相當於在前面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 有問題歡迎與我討論，共同進步。