rxjs 5.Xシリーズ——transformシリーズapiメモ
53543 ワード
前言
この文章は筆者の翻訳です. RxJS 5.X公式サイト各種operation操作シリーズの第一編 —— トランスフォーム変換.もし間違いがあったら、ご指摘をお願いします.もっと詳しい資料はrxjs公式サイトにあります.http://reactivex.io/rxjs/manual/overview.htm】デモの例があるサイト【http://xgrommx.github.io/rx-book/content/observableを選択します
この論文では、transform操作についての内容があります.buffer、bufferCount、bufferTime、bufferTogggle、bufferWhen、concatMap、concatMapTo、exhaustMap、expand、groupBy、map、map Tototo、merge、mergeddodowmemergedtMatttttdododododododowMedowMettttttttttttMatttttttMattttttttttttttttttttttttttttttttttttttttttttttttt私、windowTogle、windowWhen、flatMap.
1.buffer——カスタムグループ
バッファを作成して、データソースによって生成された値をバッファに集めて、いくつかのルールを通して、これらの値を再送信します.
2.bufferCount——データ量に応じてグループ化する
バッファを作成し、データソースをバッファに集め、パラメータnに従ってデータソースをパケット化し、各グループにn個のデータがあり、最後にグループが良いデータセットを送信します.
バッファを作成して、データソースをバッファに集め、時間パラメータnに従ってデータソースをパケット化し、同じnミリ秒のデータをセットにして、パケットの良いデータセットを送信する.
bufferTogle(open:Observable)=>close:Observalbe:Observalbe.(自己資料参照)
5.bufferWhen――カスタムクローズ関数に従ってグループ化する
bufferWhen(closeFuc:function():Observable):Observable
関数送信値を閉じるたびに、現在のデータを一度にグループ化し、今度のグループを返します.
6.concatMap――データは遍歴マッピングし、【順次】つなぎ合わせます.
データソースの各データを繰り返して指定した関数を実行します.この関数はObservableを返して、最後に各運転関数の後のObservableを順次綴ります.mergeMapは運行を統合します.
7.concatMapTo―― データは特定のObservableにマッピングされ、【順次】スプライスされます.
concatMapと似ていますが、各値をマッピングするのは同じ内容のObservableです.
データソースの各データを繰り返して指定した関数を実行し、この関数はObservableを返す必要があります.この場合、直ちに現在のObservableのsubscribe関数を実行し、subscribe関数が実行されている間、データソースが新しいデータが到着しても指定された関数を実行しないでObservableに戻ります.つまり、現在Observable.subscribeが実行されたときだけ、次のデータを受け取り、上記のプロセスを繰り返す.
expandは前回発生した値を自分に伝えて再帰します.
10.groupBy——指定された条件に従ってデータソースをグループ化する
指定された条件関数に従ってデータソースをグループ化し、Observable groupを得る.関数で返される文字列は、各グループのkey値として使用されます.グループは購読できます.
11.map――データソースごとに特定の変換操作を行う
複数のObservableを統合して、一つのObservableが値を送信するたびに、observerに受信される.
データソースの生成したすべての値は、関数を介してObservableに変換され、すべてのObservableを一つのストリームにマージする.concatMapはデータソースの各項目に対して、関数を経てObservableに変換してこれらのObservableを一つのストリームに結合する.
15.mergMapTo——データソースごとに特定の変換操作を行い、統合する
17.mergAll——高次Observableを一段階にする
mergallは、高次のObervableを、すべて平準化し、これらのObservableを一つにまとめることができ、Observableは、任意のObservableから生じる値を受信することができる.また、現在時刻の最大数を示すパラメータを受信することができます.mergMap/mergMapToとは違って、mergAllは高次のObserbable、mergMap/mergMapToを直接合併します.
18.pairwise——現在のObservableの発生した各値を組み合わせる
現在Observableで発生している各値を、2つの値を含む配列として組み合わせ、配列の最初の値を現在の項目の値とし、配列の2番目の値を次の項目の値とします.
partitionは、現在のObservableを指定条件によって二つのグループに分けることができ、該当するのは一つのグループであり、該当しないのは一つのグループであり、groupByと同様である.
20.pluck——key値からObservableが生成する値を抽出するvalue
pluckは、key値からObservableが生成した値(オブジェクトが必要)のvalueを抽出し、複数のkey値を入力することができます.valueを深層的に取得します.
Observableから送信された値を積算して作業します.積算積み立てなど、性質は元のjsのreduceに似ています.
22.switch Map——Observableを変換し、現在のObservableを更新する
switchは、新しいObservableが生成されるたびに、新しいObservableが生成される関数を受信します.つまり、新たに始めるという意味があります.
同じで、指定されたObservableをそのまま受信しただけで、swicthMapはObservableを生成する関数を受信します.
windowは新しいObservableを生むことができます.したがって、Windows全体を呼び出す表現は、実際には高次のObservableである.高次ObservableはmergAllで処理できます.
25.window Count――数量間隔によって異なるObservableが発生します.
28.flatMap——変換しながら、高次から一階までの扁平化を行う
この文章は筆者の翻訳です. RxJS 5.X公式サイト各種operation操作シリーズの第一編 —— トランスフォーム変換.もし間違いがあったら、ご指摘をお願いします.もっと詳しい資料はrxjs公式サイトにあります.http://reactivex.io/rxjs/manual/overview.htm】デモの例があるサイト【http://xgrommx.github.io/rx-book/content/observableを選択します
この論文では、transform操作についての内容があります.buffer、bufferCount、bufferTime、bufferTogggle、bufferWhen、concatMap、concatMapTo、exhaustMap、expand、groupBy、map、map Tototo、merge、mergeddodowmemergedtMatttttdododododododowMedowMettttttttttttMatttttttMattttttttttttttttttttttttttttttttttttttttttttttttt私、windowTogle、windowWhen、flatMap.
1.buffer——カスタムグループ
バッファを作成して、データソースによって生成された値をバッファに集めて、いくつかのルールを通して、これらの値を再送信します.
var source = Rx.Observable.timer(0, 50)
.buffer(function () { return Rx.Observable.timer(125); })
.take(3);
// [0, 1, 2], [3, 4, 5], [6, 7]
2.bufferCount——データ量に応じてグループ化する
バッファを作成し、データソースをバッファに集め、パラメータnに従ってデータソースをパケット化し、各グループにn個のデータがあり、最後にグループが良いデータセットを送信します.
var source = Rx.Observable.range(1, 6)
.bufferCount(2);
// [ 1, 2 ], [ 3, 4 ], [ 5, 6]
3.バfferTime —— 時間によるグループ化バッファを作成して、データソースをバッファに集め、時間パラメータnに従ってデータソースをパケット化し、同じnミリ秒のデータをセットにして、パケットの良いデータセットを送信する.
var source = Rx.Observable.timer(0,1000); // :0 1 2 3 ...
var target = source.bufferTime(2500); // :[0,1,2] [3,4] ...
4.bufferTogle——カスタム開始と終了によるグループ分けbufferTogle(open:Observable)=>close:Observalbe:Observalbe.(自己資料参照)
const source$ = Rx.Observable.interval(500);
const open$ = Rx.Observable.interval(1500);
const close$ = Rx.Observable.interval(1000);
const foo$ = source$.bufferToggle(open$, ( ) => {
return close$;
});
/**
---0---1---2---3---4---5---6---7---8---9----.... (source)
-----------1-----------2-----------3--------... (open)
--- ---x --- ---x --- ---x... (close)
bufferToggle(open$, () => close$)
------------------([2,3])-----([5.6])-----([8,9])--...
*/
5.bufferWhen――カスタムクローズ関数に従ってグループ化する
bufferWhen(closeFuc:function():Observable):Observable
関数送信値を閉じるたびに、現在のデータを一度にグループ化し、今度のグループを返します.
const open$ = Rx.Observable.interval(1000);
const click$ = Rx.Observable.fromEvent(document, 'click');
var w = open$.bufferWhen(( ) => click$);
w.subscribe(x => console.log(x))
//
// :[0, 1, 2]
// :[3, 4, 5, 6]
6.concatMap――データは遍歴マッピングし、【順次】つなぎ合わせます.
データソースの各データを繰り返して指定した関数を実行します.この関数はObservableを返して、最後に各運転関数の後のObservableを順次綴ります.mergeMapは運行を統合します.
var source = Rx.Observable.of(1,2,3);
var mf = function(item){
return Rx.Observable.range(item,3);
};
var target = source.concatMap(mf);
// :1 2 3, 2 3 4, 3 4 5
7.concatMapTo―― データは特定のObservableにマッピングされ、【順次】スプライスされます.
concatMapと似ていますが、各値をマッピングするのは同じ内容のObservableです.
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.concatMapTo(Rx.Observable.interval(1000).take(4));
result.subscribe(x => console.log(x));
// interval(1000).take(4)
8.exhaust Map――暇があればデータマッピングを行います.データソースの各データを繰り返して指定した関数を実行し、この関数はObservableを返す必要があります.この場合、直ちに現在のObservableのsubscribe関数を実行し、subscribe関数が実行されている間、データソースが新しいデータが到着しても指定された関数を実行しないでObservableに戻ります.つまり、現在Observable.subscribeが実行されたときだけ、次のデータを受け取り、上記のプロセスを繰り返す.
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.exhaustMap((ev) =>Rx.Observable.interval(1000).take(4));
result.subscribe(x => console.log(x));
// , 4 , [0, 1, 2, 3]
// , [0,1,2,3]
9.expand——再帰的データマッピングexpandは前回発生した値を自分に伝えて再帰します.
var clicks = Rx.Observable.fromEvent(document, 'click');
var powersOfTwo = clicks
.mapTo(1)
.expand(x => Rx.Observable.of(2 * x).delay(1000))
.take(10);
powersOfTwo.subscribe(x => console.log(x));
// 1, 2, 4, 8, 16, 32, 64, 128 ...
10.groupBy——指定された条件に従ってデータソースをグループ化する
指定された条件関数に従ってデータソースをグループ化し、Observable groupを得る.関数で返される文字列は、各グループのkey値として使用されます.グループは購読できます.
var source = Rx.Observable.timer(0,1000);// :0 1 2 ...
var gf = function(item){
return item %2 === 0 ? "EVEN":"ODD"; // EVEN ODD
}
var target = source.groupBy(gf);
target.subscribe(x => {
if ( x.key === 'EVEN' ) { // key group
x.subscribe( x => console.log(x))
}
});
11.map――データソースごとに特定の変換操作を行う
var clicks = Rx.Observable.fromEvent(document, 'click');
var positions = clicks.map(ev => ev.clientX);
positions.subscribe(x => console.log(x));
//
12.mapTo——データソースの各項目を指定の値/その他に変換します.var clicks = Rx.Observable.fromEvent(document, 'click');
var greetings = clicks.mapTo('Hi');
greetings.subscribe(x => console.log(x))
// 'HI'
14.merge——複数のデータソースを統合する複数のObservableを統合して、一つのObservableが値を送信するたびに、observerに受信される.
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.merge(Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));
// , i, i n
// , $mouseEvent
14.mergMap――データソースごとに特定の変換操作を行い、統合するデータソースの生成したすべての値は、関数を介してObservableに変換され、すべてのObservableを一つのストリームにマージする.concatMapはデータソースの各項目に対して、関数を経てObservableに変換してこれらのObservableを一つのストリームに結合する.
// mergeMap
var letters = Rx.Observable.of('a', 'b', 'c');
var result = letters.mergeMap(x =>
Rx.Observable.interval(1000).map(i => x+i)
);
result.subscribe(x => console.log(x));
// 'ai bi ci' i 0 n
// concatMap
var letters = Rx.Observable.of('a', 'b', 'c');
var result = letters.concatMap(x =>
Rx.Observable.interval(1000).map(i => x+i).take(3)
);
result.subscribe(x => console.log(x));
// a0, a1, a2, b0, b1, b2, c0, c1, c2
15.mergMapTo——データソースごとに特定の変換操作を行い、統合する
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.mergeMapTo(Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));
// observabl , observabl
16.mergScan——まだありません.17.mergAll——高次Observableを一段階にする
mergallは、高次のObervableを、すべて平準化し、これらのObservableを一つにまとめることができ、Observableは、任意のObservableから生じる値を受信することができる.また、現在時刻の最大数を示すパラメータを受信することができます.mergMap/mergMapToとは違って、mergAllは高次のObserbable、mergMap/mergMapToを直接合併します.
// mergeAll
var clicks = Rx.Observable.fromEvent(document, 'click');
var higherOrder = clicks.map((ev) => Rx.Observable.interval(1000));
var firstOrder = higherOrder.mergeAll();
firstOrder.subscribe(x => console.log(x));
// Observable
// mergeAll Observable Observable
// mergeAll
var clicks = Rx.Observable.fromEvent(document, 'click');
var higherOrder = clicks.map((ev) => Rx.Observable.interval(1000).take(5));
var firstOrder = higherOrder.mergeAll(2);
firstOrder.subscribe(x => console.log(x));
// Observable
// 2 Observable,
// Observable Observable 2
18.pairwise——現在のObservableの発生した各値を組み合わせる
現在Observableで発生している各値を、2つの値を含む配列として組み合わせ、配列の最初の値を現在の項目の値とし、配列の2番目の値を次の項目の値とします.
var a = Rx.Observable.interval(1000);
var b = a.pairwise();
b.subscribe(x=>console.log(x))
// :[1, 2], [2, 3], [3, 4], [4, 5], ....
19.partition——現在のObservableを二つのグループに分けるObservablepartitionは、現在のObservableを指定条件によって二つのグループに分けることができ、該当するのは一つのグループであり、該当しないのは一つのグループであり、groupByと同様である.
var clicks = Rx.Observable.fromEvent(document, 'click');
var parts = clicks.partition(ev => ev.target.tagName === 'DIV');
var clicksOnDivs = parts[0]; // 1
var clicksElsewhere = parts[1]; // 2
clicksOnDivs.subscribe(x => console.log('DIV clicked: ', x));
clicksElsewhere.subscribe(x => console.log('Other clicked: ', x));
20.pluck——key値からObservableが生成する値を抽出するvalue
pluckは、key値からObservableが生成した値(オブジェクトが必要)のvalueを抽出し、複数のkey値を入力することができます.valueを深層的に取得します.
var clicks = Rx.Observable.fromEvent(document, 'click');
var tagNames = clicks.pluck('target', 'tagName');
tagNames.subscribe(x => console.log(x));
// , tagName --> $event.target.tagName
21.scan——Observable値の累積操作を行うObservableから送信された値を積算して作業します.積算積み立てなど、性質は元のjsのreduceに似ています.
var clicks = Rx.Observable.fromEvent(document, 'click');
var ones = clicks.mapTo(1);
var seed = 0;
var count = ones.scan((acc, one) => acc + one, seed);
count.subscribe(x => console.log(x));
// :1, 2,3, 4....
22.switch Map——Observableを変換し、現在のObservableを更新する
switchは、新しいObservableが生成されるたびに、新しいObservableが生成される関数を受信します.つまり、新たに始めるという意味があります.
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.switchMap((ev) => Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));
// 0 n
23.switch MapTo——Observableを指定変換し、現在のObservableを更新する同じで、指定されたObservableをそのまま受信しただけで、swicthMapはObservableを生成する関数を受信します.
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.switchMapTo(Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));
// 0 n
24.window――新たなObservableが生まれるwindowは新しいObservableを生むことができます.したがって、Windows全体を呼び出す表現は、実際には高次のObservableである.高次ObservableはmergAllで処理できます.
var clicks = Rx.Observable.fromEvent(document, 'click');
var interval = Rx.Observable.interval(1000);
var result = clicks.window(interval)
.map(win => win.take(2)) // each window has at most 2 emissions
.mergeAll(); // flatten the Observable-of-Observables
result.subscribe(x => console.log(x));
//
25.window Count――数量間隔によって異なるObservableが発生します.
var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.windowCount(3)
.map(win => win.skip(1)) // skip first of every 3 clicks
.mergeAll(); // flatten the Observable-of-Observables
result.subscribe(x => console.log(x));
26.windowTime——時間間隔によって異なるObservableが発生します.var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.windowTime(1000)
.map(win => win.take(2)) // each window has at most 2 emissions
.mergeAll(); // flatten the Observable-of-Observables
result.subscribe(x => console.log(x));
27.windowowWhen――パラメータによって異なるObservableが発生します.var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks
.windowWhen(() => Rx.Observable.interval(1000 + Math.random() * 4000))
.map(win => win.take(2)) // each window has at most 2 emissions
.mergeAll(); // flatten the Observable-of-Observables
result.subscribe(x => console.log(x));
28.flatMap——変換しながら、高次から一階までの扁平化を行う
Rx.Observable.of( 1, 2, 3)
.flatMap( x => Rx.Observable.range( x, 3 )) // Observable
.subscribe(x => console.log( x ));
//
// 1 2 3, 2 3 4, 3 4 5
http://www.cnblogs.com/BestMePeng/p/rxjs_learn_tranform.