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——カスタムグループ
バッファを作成して、データソースによって生成された値をバッファに集めて、いくつかのルールを通して、これらの値を再送信します.
var source = Rx.Observable.timer(0, 50)
  .buffer(function () { return Rx.Observable.timer(125); })
  .take(3);
// [0, 1, 2], [3, 4, 5], [6, 7]
rxjs5.X系列 —— transform系列 api 笔记_第1张图片
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を二つのグループに分けるObservable
partitionは、現在の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.