scan

signature: scan(accumulator: function, seed: any): Observable

Reduce over time.


:bulb: You can create Redux-like state management with
scan!


scan - 图2

Examples

Example 1: Sum over time

( StackBlitz )

  1. import { of } from 'rxjs/observable/of';
  2. import { scan } from 'rxjs/operators';
  3. const source = of(1, 2, 3);
  4. // basic scan example, sum over time starting with zero
  5. const example = source.pipe(scan((acc, curr) => acc + curr, 0));
  6. // log accumulated values
  7. // output: 1,3,6
  8. const subscribe = example.subscribe(val => console.log(val));
Example 2: Accumulating an object

( StackBlitz |
jsBin |
jsFiddle )

  1. import { Subject } from 'rxjs/Subject';
  2. import { scan } from 'rxjs/operators';
  3. const subject = new Subject();
  4. //scan example building an object over time
  5. const example = subject.pipe(
  6. scan((acc, curr) => Object.assign({}, acc, curr), {})
  7. );
  8. //log accumulated values
  9. const subscribe = example.subscribe(val =>
  10. console.log('Accumulated object:', val)
  11. );
  12. //next values into subject, adding properties to object
  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' });
Example 3: Emitting random values from the accumulated array.

( StackBlitz )

  1. import { interval } from 'rxjs/observable/interval';
  2. import { scan, map, distinctUntilChanged } from 'rxjs/operators';
  3. // Accumulate values in an array, emit random values from this array.
  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);

Additional Resources


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