学习 RxJS 操作符
- 1.什么是操作符
- 2.实例操作符 vs. 静态操作符
- 3. 弹珠图
- 4.选择操作符
- 5.操作符分类
- 5.1 创建操作符
- 5.1.1. create
- 5.1.2. of:列举数据
- 5.1.3. range:指定范围
- 5.1.4. generate:循环创建
- 5.1.5. repeat: 重复数据流
- 5.1.6. 三个极简的操作符: empty, never, throw
- 5.1.7. 创建异步数据的Observable对象: interval和timer定时产生数据
- 5.1.8. from:可把一切转化为Observable
- 5.1.9. fromPromise: 异步处理
- 5.1.10. fromEvent
- 5.1.11. fromEventPattern
- 5.1.12. ajax
- 5.1.13. repeatWhen
- 5.1.14. defer
- 5.2 转换操作符
- 5.2.1. map
- 5.2.2. mapTo
- 5.2.3. pluck
- 5.2.4. windowTime
- 5.2.5. bufferTime
- 5.2.6. widowCount和bufferCount
- 5.2.7. windowWhen和bufferWhen
- 5.2.8. windowToggle 和 bufferToggle
- 5.2.9. window和buffer
- 5.2.10. concatMap
- 5.2.11. mergeMap
- 5.2.12. switchMap
- 5.2.13. exhaustMap
- 5.2.14. MapTo
- 5.2.15. expand
- 5.2.16. scan
- 5.2.17. mergeScan
- 5.2.18. pairwise
- 5.3 过滤操作符
- 5.4 组合操作符
- 5.5 多播操作符
- 5.6 错误处理操作符
- 5.7 工具操作符
- 5.8 条件和布尔操作符
- 5.9 数学和聚合操作符
- 6. 学习地址:
1.什么是操作符
操作符是 Observable 类型上的方法,比如 .map(…)、.filter(…)、.merge(…),等等。当操作符被调用时,它们不会改变已经存在的 Observable 实例。相反,它们返回一个新的 Observable ,它的 subscription 逻辑基于第一个 Observable 。
2.实例操作符 vs. 静态操作符
2.1实例操作符
它是 Observable 实例上的方法
2.2静态操作符
它们是直接附加到 Observable 类上的, 一些创建操作符, 组合操作符都是静态操作符
3. 弹珠图
要解释操作符是如何工作的,文字描述通常是不足以描述清楚的。许多操作符都是跟时间相关的,它们可能会以不同的方式延迟(delay)、取样(sample)、节流(throttle)或去抖动值(debonce)。图表通常是更适合的工具。弹珠图是操作符运行方式的视觉表示,其中包含输入 Obserable(s) (输入可能是多个 Observable )、操作符及其参数和输出 Observable 。
在弹珠图中,时间流向右边,图描述了在 Observable 执行中值(“弹珠”)是如何发出的。
4.选择操作符
你需要找到一个操作符来解决你的问题吗? 从下面的列表中选择一个选项开始:
- 我有一个已存在的Observable, 然后…(详看官网)
5.操作符分类
高阶Observable
pipe, 可以把多个操作符串联起来,形成数据管道。
let operatePiep_$ = of(1,2,3);
const result = operatePiep_$.pipe(filter(x => x%2 === 0), map(x => x*2)); //过滤是偶数,结果每个数据乘以2
result.subscribe(item => {
console.log(item) // 4
});
// pipe的用法就是可以连接多个操作符,和下面链式调用结果一样
const result2 = operatePiep_$.filter(x => x%2 === 0). map(x => x*2);
result2.subscribe(item => {
console.log(item) // 4
});
注: 没有写案例得就是项目中还未使用过
5.1 创建操作符
5.1.1. create
5.1.2. of:列举数据
5.1.3. range:指定范围
5.1.4. generate:循环创建
5.1.5. repeat: 重复数据流
5.1.6. 三个极简的操作符: empty, never, throw
5.1.7. 创建异步数据的Observable对象: interval和timer定时产生数据
5.1.8. from:可把一切转化为Observable
5.1.9. fromPromise: 异步处理
5.1.10. fromEvent
5.1.11. fromEventPattern
5.1.12. ajax
5.1.13. repeatWhen
5.1.14. defer
5.2 转换操作符
5.2.1. map
5.2.2. mapTo
5.2.3. pluck
5.2.4. windowTime
5.2.5. bufferTime
5.2.6. widowCount和bufferCount
5.2.7. windowWhen和bufferWhen
5.2.8. windowToggle 和 bufferToggle
5.2.9. window和buffer
5.2.10. concatMap
5.2.11. mergeMap
5.2.12. switchMap
5.2.13. exhaustMap
5.2.14. MapTo
5.2.15. expand
5.2.16. scan
5.2.17. mergeScan
5.2.18. pairwise
5.3 过滤操作符
5.3.1. filter
5.3.2. first
5.3.3. last
5.3.4. take
5.3.5. skip
5.3.6. skip和skipUntil
5.3.7. throttle和debounce
let operateDebounceTime_$ = interval(300);
operateDebounceTime_$.pipe(take(5), debounceTime(3000)).subscribe(item => {
console.log(item); //防止抖动,最后一个值才会发布 输出:4
});
//节流,一共发布5次, 为了节流,再隔300ms去发布,减少发布次数,
// interval(300)的弹珠图: 0----300ms----1----300ms----2----300ms----3----300ms----4
// interval(300)的弹珠图: 0----300ms--------300ms----2----300ms--------300ms----4
let operateThrottleTime_$ = interval(300);
operateThrottleTime_$.pipe(take(5), throttleTime(300)).subscribe(item => {
console.log(item); // 输出: 0 2 4
});
5.3.8. auditTime和audit
5.3.9. sampleTime和sample
5.3.10. ignoreElements
5.3.11. elemetAt
5.3.12. single
5.3.13. distinct、distinctUntilChanged
let operateDistinct_$ = from(['a', 'b', 'c', 'a', 'b']);
// operateDistinct_$.pipe(zip(interval(3000))).subscribe(item => {
// console.log(item); // 0 ['a', 0] ['b', 1] 2 ['c', 2] ['a', 3] 4 ['b', 4]
// });
// operateDistinct_$.pipe(zip(interval(3000), (x, y) => x)).subscribe(item => {
// console.log(item); // 0 2 4 'a', 'b', 'c', 'a', 'b'
// });
operateDistinct_$.pipe(zip(interval(3000), (x, y) => x), distinct()).subscribe(item => {
// console.log(item); // 0 2 4 'a', 'b', 'c', 去重
});
operateDistinct_$.pipe(zip(interval(3000), (x, y) => x)).pipe(distinct()).subscribe(item => {
// console.log(item); // 0 2 4 'a', 'b', 'c', 去重
});
let operateDistinct3_$ = from(['a', 'b', 'c', 'a', 'b']);
operateDistinct3_$.pipe(zip(interval(300), (x, y) => x),distinct(null, interval(1300))).subscribe(item => {
console.log(item); // 0,a,b,2,c,a,4,b
});
let operateDistinct2_$ = from([{value: 'a'}, {value: 'b'}, {value: 'c'}, {value: 'a'}, {value: 'b'}]);
operateDistinct2_$.pipe(zip(interval(3000), (x, y) => x)).pipe(distinct((x) => { return x.value})).subscribe(item => {
// console.log(item); // 0 2 4 {value: 'a'}, {value: 'b'}, {value: 'c'}
});
5.3.14. takeUntil
5.4 组合操作符
5.4.1. concat:首尾相连
//调用接口
let operateConcat1$ = this.rxjsService.getTest1Json();
let operateConcat2$ = this.rxjsService.getTest2Json();
const result = operateConcat1$.pipe(concat(operateConcat2$))
result.subscribe(item => {
console.log(item);// interface 1 , interface 2
});
// mock接口数据,已经异步事件,
// concat连接不分异步事件,一个连接一个,按顺序来
let value1$ = interval(1000).pipe(take(3)); // 0 1 2
let value2$ = of(3); // 3
let value3$ = of(4,5); // 4 5
const result2 = value1$.pipe(concat(value2$,value3$));
result2.subscribe(item => {
console.log(item); // 0 1 2 3 4 5
});
const result3 = value2$.pipe(concat(value1$, value3$));
result3.subscribe(item => {
console.log(item); // 3 0 1 2 4 5
});
5.4.2. merge: 先到先得到快速通道
//merge 没有先后顺序, 那个完成现执行那个
let value1$ = interval(1000).pipe(take(3)); // 0 1 2
let value2$ = of(3); // 3
let value3$ = of(4,5); // 4 5
let operateMerge1$ = this.rxjsService.getTest1Json();
let operateMerge2$ = this.rxjsService.getTest2Json();
const result1 = operateMerge1$.pipe(merge(operateMerge2$))
result1.subscribe(item => {
console.log(item);// interface 1 , interface 2
});
const result2 = value1$.pipe(merge(value2$,value3$))
result2.subscribe(item => {
console.log(item); // 3 4 5 0 1 2 0 1 2最后执行了并没有在第一个
});
const result3 = value2$.pipe(merge(value1$,value3$))
result3.subscribe(item => {
console.log(item); // 3 4 5 0 1 2 0 1 2最后执行了并没有在第一个
});
5.4.3. zip:拉链式组合
5.4.4. combineLatest:合并最后一个数据
5.4.5. withLatesFrom
5.4.6. race: 胜者通吃
5.4.7. startWith
5.4.8. forkJoin
5.4.9. concatAll
5.4.10. mergeAll
5.4.11. switch
5.4.12. exhaust
5.5 多播操作符
5.5.1. Subject
5.5.2. publishBehavior 和 BehaviorSubject
5.5.3. publishReplay和 replaySubject
5.5.4. publishLast和 AsyncSubject
5.5.5. multicast
5.5.6. publish
5.5.7. share
5.5.8. shareReplay
5.6 错误处理操作符
5.6.1. try/catch
5.6.2. throwError和catchError
let operateError_$ = throwError({error: 'test throwError'});
// let operateError_$ = throwError(123); //throwError (参数可以多种类型)
operateError_$.pipe(catchError(error => { return of(error) })).subscribe(item => {
console.log(item); // 1,2
}, error => {
console.log(error); //{error: 'test throwError'} // 123
})
5.6.3. retry
5.6.4. retryWhen
5.6.5. finally
5.7 工具操作符
5.7.1. do
5.7.2. delay
let operateDelay_$ = interval(300)
operateDelay_$.pipe(take(5), delay(3000)).subscribe(item => {
console.log(item); // 等3000ms, 才输出 0 1 2 3 4 5
})
5.7.3. delayWhen
let operateDelayWhen_$ = interval(300);
operateDelayWhen_$.pipe(take(5), delayWhen(x => empty().pipe(delay(x*1000)) ) ).subscribe(item => {
console.log(item); // empty(),去掉0, 等待1000ms, 输出:1, 等待2000ms, 输出:2, 等待3000ms, 输出:3,等待4000ms, 输出:4
})
5.7.4. dematerialize
5.7.5. finally
5.7.6. let
5.7.7. materialize
5.7.8. observeOn
5.7.9. subscribeOn
5.7.10. timeInterval
5.7.11. timestamp
5.7.12. timeout
5.7.13. timeoutWith
5.7.14. toArray
5.7.15. toPromise
5.8 条件和布尔操作符
5.8.1. defaultIfEmpty
5.8.2. every
5.8.3. find
5.8.4. findIndex
5.8.5. isEmpty
5.9 数学和聚合操作符
5.9.1. count
5.9.2. max
5.9.3. min
5.9.4. reduce
6. 学习地址:
rxjs里的Observable对象的pipe方法
Rxjs知识整理
Rxjs中文官网
学习 RxJS 操作符( Learn RxJS中文版)