0%

Rxjs【map、mapTo、filter】

发表于 更新于
本文字数： 5.5k 阅读时长 ≈ 5 分钟

Rxjs学习之路

1、小贴士

这篇文章是我的Angular Rxjs Series中的第二篇文章，在继续阅读本文之前，您至少应该熟悉系列中的第一篇基础文章：

Rxjs6都改变了些什么？

Rxjs【Observable】

1
// 图谱
2
// ----- 代表一个Observable
3
// -----X 代表一个Observable有错误发生
4
// -----| 代表一个Observable结束
5
// (1234)| 代表一个同步Observable结束
6
7
// 特别提示：以下的操作符介绍均采用rxjs6的写法！！！

2、map

1、其实map操作符和js数组里的map差不多，都是传入一个callback，执行callback回传新值.
2、具体例子如下代码：
1
/**
2
 * 例如： interval(1000).pipe(map(x => x + 1));
3
 *       -----0-----1-----2-----3--...
4
 *              map(x => x + 1)
5
 *       -----1-----2-----3-----4--...
6
 */
7
interval(1000).pipe(
8
    map(x => x + 1)
9
).subscribe({
10
    next: (value) => { console.log('======map操作符: ', value); },
11
    error: (error) => { console.log('======map操作符---Error: ', error); },
12
    complete: () => { console.log('======map操作符: complete'); }
13
});

3、mapTo

1、mapTo是把传进来的值改写成为一个固定值
2、具体例子如下代码：
1
/**
2
 * 例如： interval(1000).pipe(mapTo(2))
3
 *      -----0-----1-----2-----3--...
4
 *              mapTo(2)
5
 *      -----2-----2-----2-----2--...
6
 */
7
interval(1000).pipe(
8
    mapTo('mapTo')
9
).subscribe({
10
    next: (value) => { console.log('======mapTo操作符: ', value); },
11
    error: (error) => { console.log('======mapTo操作符---Error: ', error); },
12
    complete: () => { console.log('======mapTo操作符: complete'); }
13
});

4、filter

1、其实filter操作符和js数组里的filter也差不多，都是传入一个call back，执行callback，根据回传的boolean值过滤源数据，再回传新值。
2、具体例子如下代码：
1
/**
2
 * 例如：interval(1000).pipe(filter(x => x % 2 === 0));
3
 *      -----0-----1-----2-----3-----4--...
4
 *           filter(x => x % 2 === 0)
5
 *      -----0-----------2-----------4--...
6
 */
7
interval(1000).pipe(
8
    filter(x => x % 2 === 0)
9
).subscribe({
10
    next: (value) => { console.log('======filter操作符: ', value); },
11
    error: (error) => { console.log('======filter操作符---Error: ', error); },
12
    complete: () => { console.log('======filter操作符: complete'); }
13
});

完整的例子

1
import { Component, OnInit, OnDestroy } from '@angular/core';
2
import { Observable, of, interval, Subscription } from 'rxjs';
3
import { map, take, mapTo, filter } from 'rxjs/operators';
4
5
@Component({
6
    selector: 'app-rxjs-demo',
7
    template: `
8
        <h3>Rxjs Demo To Study! -- Operators操作符(map、mapTo、filter)</h3>
9
        <button (click)="originMapHandler()">origin map</button>
10
        <button class="mgLeft" (click)="mapHandler()">map</button>
11
        <button class="mgLeft" (click)="mapToHandler()">mapTo</button>
12
        <button class="mgLeft" (click)="filterHandler()">mapTo</button>
13
        <app-back></app-back>
14
    `,
15
    styles: [`
16
        .mgLeft {
17
            margin-left: 20px;
18
        }
19
    `]
20
})
21
export class RxjsDemoComponent implements OnInit, OnDestroy {
22
    originMapSubscription: Subscription;
23
    mapSubscription: Subscription;
24
    mapToSubscription: Subscription;
25
    filterSubscription: Subscription;
26
27
    constructor() { }
28
29
    ngOnInit(): void {
30
        // 图谱
31
        // ----- 代表一个Observable
32
        // -----X 代表一个Observable有错误发生
33
        // -----| 代表一个Observable结束
34
        // (1234)| 代表一个同步Observable结束
35
    }
36
37
    map(source, callback) {
38
        return Observable.create(observer => {
39
            return source.subscribe(
40
                (value) => {
41
                    try {
42
                        observer.next(callback(value));
43
                    } catch (e) {
44
                        observer.error(e);
45
                    }
46
                },
47
                (err) => { observer.error(err); },
48
                () => { observer.complete(); }
49
            );
50
        });
51
    }
52
53
    originMapHandler() {
54
        // 1. 传统写法创建Map操作符
55
        const people = of('Jerry', 'Anna');
56
        const helloPlople = this.map(people, item => item + ' Hello~');
57
        this.originMapSubscription = helloPlople.subscribe({
58
            next: (value) => { console.log('======传统写法创建Map操作符: ', value); },
59
            error: (error) => { console.log('======传统写法创建Map操作符---Error: ', error); },
60
            complete: () => { console.log('======传统写法创建Map操作符: complete'); }
61
        });
62
    }
63
64
    mapHandler() {
65
        /**
66
         * 例如： interval(1000).pipe(map(x => x + 1));
67
         *       -----0-----1-----2-----3--...
68
         *              map(x => x + 1)
69
         *       -----1-----2-----3-----4--...
70
         */
71
        this.mapSubscription = interval(1000).pipe(
72
            map(x => x + 1),
73
            take(4)
74
        ).subscribe({
75
            next: (value) => { console.log('======map操作符: ', value); },
76
            error: (error) => { console.log('======map操作符---Error: ', error); },
77
            complete: () => { console.log('======map操作符: complete'); }
78
        });
79
    }
80
81
    mapToHandler() {
82
        /**
83
         * 例如： interval(1000).pipe(mapTo(2))
84
         *      -----0-----1-----2-----3--...
85
         *              mapTo(2)
86
         *      -----2-----2-----2-----2--...
87
         */
88
        this.mapToSubscription = interval(1000).pipe(
89
            mapTo('mapTo'),
90
            take(3)
91
        ).subscribe({
92
            next: (value) => { console.log('======mapTo操作符: ', value); },
93
            error: (error) => { console.log('======mapTo操作符---Error: ', error); },
94
            complete: () => { console.log('======mapTo操作符: complete'); }
95
        });
96
    }
97
98
    filterHandler() {
99
        /**
100
         * 例如：interval(1000).pipe(filter(x => x % 2 === 0));
101
         *      -----0-----1-----2-----3-----4--...
102
         *           filter(x => x % 2 === 0)
103
         *      -----0-----------2-----------4--...
104
         */
105
        this.filterSubscription = interval(1000).pipe(
106
            filter(x => x % 2 === 0),
107
            take(5)
108
        ).subscribe({
109
            next: (value) => { console.log('======filter操作符: ', value); },
110
            error: (error) => { console.log('======filter操作符---Error: ', error); },
111
            complete: () => { console.log('======filter操作符: complete'); }
112
        });
113
    }
114
115
    ngOnDestroy() {
116
        if (this.originMapSubscription) {
117
            this.originMapSubscription.unsubscribe();
118
        }
119
        if (this.mapSubscription) {
120
            this.mapSubscription.unsubscribe();
121
        }
122
        if (this.mapToSubscription) {
123
            this.mapToSubscription.unsubscribe();
124
        }
125
        if (this.filterSubscription) {
126
            this.filterSubscription.unsubscribe();
127
        }
128
    }
129
}

Marble Diagrams【宝珠图】

1. 这个Marble Diagrams【宝珠图】可以很灵活的表现出每个操作符的使用
2. 下面是超链接传送门

Marble Diagrams【宝珠图】