rxjs6 Utility Operators

Utility Operators
tap

用于执行副作用的函数

interval(100).pipe(
  take(3),
  tap(v => console.log('tap', v))
).subscribe(v => console.log('sub', v))
// tap 0
// sub 0
// tap 1
// sub 1
// tap 2
// sub 2

delay

在流开始的时候延时执行

let st = +new Date()
interval(100).pipe(
  delay(200)
).subscribe(v => {
  let ed = +new Date()
  console.log('sub', v, ed - st)
  st = ed
})
// sub 0 303
// sub 1 99
// sub 2 102
// sub 3 102

delayWhen

延迟到内层流输出数据

let st = +new Date()
interval(100).pipe(
  // delay(200)
  delayWhen(() => interval(200))
).subscribe(v => {
  let ed = +new Date()
  console.log('sub', v, ed - st)
  st = ed
})
// sub 0 303
// sub 1 99
// sub 2 102
// sub 3 102

dematerialize

用于拆箱Notification

const notifA = new Notification('N', 'A');
const notifB = new Notification('N', 'B');
const notifE = new Notification('E', undefined,
  new TypeError('x.toUpperCase is not a function')
);
const materialized = of(notifA, notifB, notifE);
const upperCase = materialized.pipe(dematerialize());
upperCase.subscribe(x => console.log(x), e => console.log(e));

// Results in:
// A
// B
// TypeError: x.toUpperCase is not a function

 

distinctUntilChanged

和上次的值不同时发出

const {of} = require('rxjs')
const {distinctUntilChanged} = require('rxjs/operators')

of(
  {age: 4, name: 'Foo'},
  {age: 7, name: 'Bar'},
  {age: 5, name: 'Foo'},
  {age: 6, name: 'Foo'},
).pipe(
  distinctUntilChanged((p, q) => p.name === q.name),
)
  .subscribe(x => console.log(x));

// displays:
// { age: 4, name: 'Foo' }
// { age: 7, name: 'Bar' }
// { age: 5, name: 'Foo' }


of(1,2,2,3,3,4,5,4,1).pipe(
  distinctUntilChanged()
) .subscribe(x => console.log(x));
// 1
// 2
// 3
// 4
// 5
// 4
// 1

 

finalize

在流结束的时候执行

interval(10).pipe(
  take(5),
  finalize(v => console.log('fin', v))
).subscribe(v => console.log('sub', v))
// sub 0
// sub 1
// sub 2
// sub 3
// sub 4
// fin undefined

materialize

装箱为 Notification 

const letters = of('a', 'b', 13, 'd');
const upperCase = letters.pipe(map(x => x.toUpperCase()));
const materialized = upperCase.pipe(materialize());
materialized.subscribe(x => console.log(x));
// Notification { kind: 'N', value: 'A', error: undefined, hasValue: true }
// Notification { kind: 'N', value: 'B', error: undefined, hasValue: true }
// Notification {
//   kind: 'E',
//   value: undefined,
//   error:
//    TypeError: x.toUpperCase is not a function

observeOn

用于绘制动画

  let st = +new Date()
  const intervals = interval(10);                // Intervals are scheduled
  // with async scheduler by default...
  intervals.pipe(
    observeOn(animationFrameScheduler),          // ...but we will observe on animationFrame
  )                                              // scheduler to ensure smooth animation.
    .subscribe(val => {
      durationElem.style.height = val + 'px';
      let ed = +new Date()
      console.log('val', val, ed - st)
      st = ed
    });

subscribeOn

将流转为异步

const a = of(1, 2, 3).pipe(subscribeOn(asyncScheduler));
const b = of(5, 6, 7);
// 5 6 7 1 2 3
merge(a, b).subscribe(console.log);

timeInterval

计算两个值之间的间隔

interval(100).pipe(
  take(10),
  timeInterval()
).subscribe(console.log)
// TimeInterval { value: 0, interval: 102 }
// TimeInterval { value: 1, interval: 100 }
// TimeInterval { value: 2, interval: 100 }
// TimeInterval { value: 3, interval: 101 }
// TimeInterval { value: 4, interval: 100 }

timestamp

发出值时的时间戳

interval(100).pipe(
  take(10),
  timestamp()
).subscribe(console.log)
// Timestamp { value: 0, timestamp: 1581320418652 }
// Timestamp { value: 1, timestamp: 1581320418752 }
// Timestamp { value: 2, timestamp: 1581320418853 }

timeout

超时报错

timer(100,200).pipe(
  take(10),
  timeout(150)
).subscribe(console.log)

// 0 
// TimeoutError: Timeout has occurred

timeoutWith

如果指定观察对象在事件内没有发出值, 则订阅第二个观察对象

const seconds = timer(800, 1000).pipe(map(v => 'a ' + v));
const minutes = interval(2000).pipe(map(v => 'b ' + v))  

seconds.pipe(timeoutWith(900, minutes))
  .subscribe(
    value => console.log(value), // After 900ms, will start emitting `minutes`,
    // since first value of `seconds` will not arrive fast enough.
    err => console.log(err),     // Would be called after 900ms in case of `timeout`,
    // but here will never be called.
  );
// a 0
// b 0
// b 1
// b 2
// b 3

toArray

将有限流转化为数组

// [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
interval(100).pipe(
  take(10),
  toArray()
).subscribe(console.log)

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/3164811