RxJS操作符（一）

starof發表於2018-06-05
JS

一、建立類操作符

建立類操作符是連線傳統程式設計和響應式程式設計的強梁

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 有問題歡迎與我討論，共同進步。 

相關文章