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