Rxjs【map、mapTo、filter】

Rxjs学习之路

1、小贴士

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

Rxjs6都改变了些什么？

Rxjs【Observable】

// 图谱
// ----- 代表一个Observable
// -----X 代表一个Observable有错误发生
// -----| 代表一个Observable结束
// (1234)| 代表一个同步Observable结束

// 特别提示：以下的操作符介绍均采用rxjs6的写法！！！

2、map

1、其实map操作符和js数组里的map差不多，都是传入一个callback，执行callback回传新值.
2、具体例子如下代码：

/**
 * 例如： interval(1000).pipe(map(x => x + 1));
 *       -----0-----1-----2-----3--...
 *              map(x => x + 1)
 *       -----1-----2-----3-----4--...
 */
interval(1000).pipe(
    map(x => x + 1)
).subscribe({
    next: (value) => { console.log('======map操作符: ', value); },
    error: (error) => { console.log('======map操作符---Error: ', error); },
    complete: () => { console.log('======map操作符: complete'); }
});

3、mapTo

1、mapTo是把传进来的值改写成为一个固定值
2、具体例子如下代码：

/**
 * 例如： interval(1000).pipe(mapTo(2))
 *      -----0-----1-----2-----3--...
 *              mapTo(2)
 *      -----2-----2-----2-----2--...
 */
interval(1000).pipe(
    mapTo('mapTo')
).subscribe({
    next: (value) => { console.log('======mapTo操作符: ', value); },
    error: (error) => { console.log('======mapTo操作符---Error: ', error); },
    complete: () => { console.log('======mapTo操作符: complete'); }
});

4、filter

1、其实filter操作符和js数组里的filter也差不多，都是传入一个call back，执行callback，根据回传的boolean值过滤源数据，再回传新值。
2、具体例子如下代码：

/**
 * 例如：interval(1000).pipe(filter(x => x % 2 === 0));
 *      -----0-----1-----2-----3-----4--...
 *           filter(x => x % 2 === 0)
 *      -----0-----------2-----------4--...
 */
interval(1000).pipe(
    filter(x => x % 2 === 0)
).subscribe({
    next: (value) => { console.log('======filter操作符: ', value); },
    error: (error) => { console.log('======filter操作符---Error: ', error); },
    complete: () => { console.log('======filter操作符: complete'); }
});

---

完整的例子

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, of, interval, Subscription } from 'rxjs';
import { map, take, mapTo, filter } from 'rxjs/operators';

@Component({
    selector: 'app-rxjs-demo',
    template: `
        
Rxjs Demo To Study! -- Operators操作符(map、mapTo、filter)
        origin map
        map
        mapTo
        mapTo
        
    `,
    styles: [`
        .mgLeft {
            margin-left: 20px;
        }
    `]
})
export class RxjsDemoComponent implements OnInit, OnDestroy {
    originMapSubscription: Subscription;
    mapSubscription: Subscription;
    mapToSubscription: Subscription;
    filterSubscription: Subscription;

    constructor() { }

    ngOnInit(): void {
        // 图谱
        // ----- 代表一个Observable
        // -----X 代表一个Observable有错误发生
        // -----| 代表一个Observable结束
        // (1234)| 代表一个同步Observable结束
    }

    map(source, callback) {
        return Observable.create(observer => {
            return source.subscribe(
                (value) => {
                    try {
                        observer.next(callback(value));
                    } catch (e) {
                        observer.error(e);
                    }
                },
                (err) => { observer.error(err); },
                () => { observer.complete(); }
            );
        });
    }

    originMapHandler() {
        // 1. 传统写法创建Map操作符
        const people = of('Jerry', 'Anna');
        const helloPlople = this.map(people, item => item + ' Hello~');
        this.originMapSubscription = helloPlople.subscribe({
            next: (value) => { console.log('======传统写法创建Map操作符: ', value); },
            error: (error) => { console.log('======传统写法创建Map操作符---Error: ', error); },
            complete: () => { console.log('======传统写法创建Map操作符: complete'); }
        });
    }

    mapHandler() {
        /**
         * 例如： interval(1000).pipe(map(x => x + 1));
         *       -----0-----1-----2-----3--...
         *              map(x => x + 1)
         *       -----1-----2-----3-----4--...
         */
        this.mapSubscription = interval(1000).pipe(
            map(x => x + 1),
            take(4)
        ).subscribe({
            next: (value) => { console.log('======map操作符: ', value); },
            error: (error) => { console.log('======map操作符---Error: ', error); },
            complete: () => { console.log('======map操作符: complete'); }
        });
    }

    mapToHandler() {
        /**
         * 例如： interval(1000).pipe(mapTo(2))
         *      -----0-----1-----2-----3--...
         *              mapTo(2)
         *      -----2-----2-----2-----2--...
         */
        this.mapToSubscription = interval(1000).pipe(
            mapTo('mapTo'),
            take(3)
        ).subscribe({
            next: (value) => { console.log('======mapTo操作符: ', value); },
            error: (error) => { console.log('======mapTo操作符---Error: ', error); },
            complete: () => { console.log('======mapTo操作符: complete'); }
        });
    }

    filterHandler() {
        /**
         * 例如：interval(1000).pipe(filter(x => x % 2 === 0));
         *      -----0-----1-----2-----3-----4--...
         *           filter(x => x % 2 === 0)
         *      -----0-----------2-----------4--...
         */
        this.filterSubscription = interval(1000).pipe(
            filter(x => x % 2 === 0),
            take(5)
        ).subscribe({
            next: (value) => { console.log('======filter操作符: ', value); },
            error: (error) => { console.log('======filter操作符---Error: ', error); },
            complete: () => { console.log('======filter操作符: complete'); }
        });
    }

    ngOnDestroy() {
        if (this.originMapSubscription) {
            this.originMapSubscription.unsubscribe();
        }
        if (this.mapSubscription) {
            this.mapSubscription.unsubscribe();
        }
        if (this.mapToSubscription) {
            this.mapToSubscription.unsubscribe();
        }
        if (this.filterSubscription) {
            this.filterSubscription.unsubscribe();
        }
    }
}

---

Marble Diagrams【宝珠图】

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

Marble Diagrams【宝珠图】

Angular Rxjs Series

1. Rxjs6都改变了些什么？
2. Rxjs【Observable】
3. Rxjs【take, first, takeUntil, concatAll】