[Rxjs] Combination Operators

[varHarrie]

Combination Operators

目录

• combineLatest
• zip
• withLatestFrom
• 待续...

combineLatest

combineLatest(...obserables: Observable[], project: (...values: any[]) => any)

• 当所有Observable都送出第一个值时，开始送出
• 之后每个Observable送出时，继续送出
• 将所有Observable的最新值，传入project()，最终推送值为project()返回值

const source = Rx.Observalbe.interval(500).take(3)
const newest = Rx.Observable.interval(300).take(6)

const example = source.combineLatest(newest, (x, y) => x + y)
example.subscribe((value) => console.log(value))

source : ----0----1----2|
newest : --0--1--2--3--4--5|

    combineLatest(newest, (x, y) => x + y)

example: ----01--23-4--(56)--7|

zip

zip(...obserables: Observable[], project: (...values: any[]) => any)

• 当所有Observable都送出第一个值时，开始送出
• 之后当所有Observable都送出第i个值时，继续送出
• 将所有Observable的第i个值，传入project()，最终推送值为project()返回值
• 注意：当Observable之间的推送时间差距太大，中间会cache大量的值

const source = Rx.Observalbe.interval(500).take(3)
const newest = Rx.Observable.interval(300).take(6)

const example = source.zip(newest, (x, y) => x + y)
example.subscribe((value) => console.log(value))

source : ----0----1----2|
newest : --0--1--2--3--4--5|
    zip(newest, (x, y) => x + y)
example: ----0----2----4|

withLatestFrom

withLatestFrom(...obserables: Observable[], project: (...values: any[]) => any)

• 当所有Observable都送出第一个值时，开始送出
• 之后只有源Obsrvable送出值时，继续送出
• 将所有Observable的最新值，传入project()，最终推送值为project()返回值

const source = Rx.Observalbe.interval(500).take(3)
const newest = Rx.Observable.interval(300).take(6)

const example = source.withLatestFrom(newest, (x, y) => x + y)
example.subscribe((value) => console.log(value))

source : ----0----1----2|
newest : --0--1--2--3--4--5|
    withLatestFrom(newest, (x, y) => x + y)
example: ----0----3----6|

参考资料

RxJS Operators 详解 30 天精通 RxJS