• scan
    • 签名: scan(accumulator: function, seed: any): Observable
  • 随着时间的推移进行归并。
    • 示例
      • 示例 1: 随着时间的推移计算总数
      • 示例 2: 对对象进行累加
      • 示例 3: 随机发出累加数组中的值。
  • 相关食谱
  • 其他资源

    scan

    签名: scan(accumulator: function, seed: any): Observable

    随着时间的推移进行归并。


    :bulb: 此操作符是许多基于 Redux 实现的 RxJS 的核心!


    scan - 图2

    示例

    示例 1: 随着时间的推移计算总数

    ( StackBlitz )

    1. import { of } from 'rxjs/observable/of';
    2. import { scan } from 'rxjs/operators';
    3. const source = of(1, 2, 3);
    4. // 基础的 scan 示例,从0开始,随着时间的推移计算总数
    5. const example = source.pipe(scan((acc, curr) => acc + curr, 0));
    6. // 输出累加值
    7. // 输出: 1,3,6
    8. const subscribe = example.subscribe(val => console.log(val));
    示例 2: 对对象进行累加

    ( StackBlitz |
    jsBin |
    jsFiddle )

    1. import { Subject } from 'rxjs/Subject';
    2. import { scan } from 'rxjs/operators';
    3. const subject = new Subject();
    4. // scan 示例,随着时间的推移构建对象
    5. const example = subject.pipe(
    6. scan((acc, curr) => Object.assign({}, acc, curr), {})
    7. );
    8. // 输出累加值
    9. const subscribe = example.subscribe(val =>
    10. console.log('Accumulated object:', val)
    11. );
    12. // subject 发出的值会被添加成对象的属性
    13. // {name: 'Joe'}
    14. subject.next({ name: 'Joe' });
    15. // {name: 'Joe', age: 30}
    16. subject.next({ age: 30 });
    17. // {name: 'Joe', age: 30, favoriteLanguage: 'JavaScript'}
    18. subject.next({ favoriteLanguage: 'JavaScript' });
    示例 3: 随机发出累加数组中的值。

    ( StackBlitz )

    1. import { interval } from 'rxjs/observable/interval';
    2. import { scan, map, distinctUntilChanged } from 'rxjs/operators';
    3. // 累加数组中的值,并随机发出此数组中的值
    4. const scanObs = interval(1000)
    5. .pipe(
    6. scan((a, c) => [...a, c], []),
    7. map(r => r[Math.floor(Math.random() * r.length)]),
    8. distinctUntilChanged()
    9. )
    10. .subscribe(console.log);

    相关食谱

    • 智能计数器
    • 进度条

    其他资源

    • scan :newspaper: - 官方文档
    • 使用 RxJS 中的 reduce 和 scan 聚集流 :video_camera: - Ben Lesh
    • 使用 scan 更新数据 :video_camera: :dollar: - John Linquist
    • 转换操作符: scan :video_camera: :dollar: - André Staltz

    :file_folder: 源码: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/scan.ts