转化类操作符：map、mapTo和pluck

article/2025/8/28 12:45:45

map介绍：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';// 第一种
const source$ = Observable.of(3, 1, 4);
const mapFunc = function(value, index) { return `${value} ${this.separator} ${index}`;
};
const context = {separator: ':'};
const result$ = source$.map(mapFunc, context);
result$.subscribe(console.log,null,() => console.log('complete')
);// 解释说明：mapFunc这个函数是map的第一个参数，充当project的功能，同时，map还有第二个参数context对象，如果用上这个参数，那么mapFunc在每次执行的时候，this就是map的这个参数context，所以，在mapFunc中this.separator的值就是冒号（:）// 第二种
const source$ = Observable.of(3, 1, 4);
const context = {separator: ':'};
const mapFunc = (function (separator) {return function(value, index) {return `${value} ${separator} ${index}`;};
})(context.separator)
const result$ = source$.map(mapFunc);
result$.subscribe(console.log,null,() => console.log('complete')
);// 解释说明：并不建议使用第一种方式，按照函数式编程的原则，应该尽量让函数成为纯函数，如果一个函数的执行依赖于this，那么就难以预料这个函数的执行结果，并不是什么好事。所以，我们知道map有这个功能，但要尽量避免使用它
// 利用一个立即执行的函数产生一个新的函数mapFunc，这样既定制了mapFunc中使用的separator，又保持了函数体内代码的纯洁

运行结果：

map源码介绍：

var map_1 = require('../operators/map');function map(project, thisArg) {return map_1.map(project, thisArg)(this);
}// map_1
export declare function map<T, R>(this: Observable<T>, project: (value: T, index: number) => R, thisArg?: any): Observable<R>;

mapTo介绍:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/mapTo';// import 'rxjs/add/operator/map';const source$ = Observable.of(3, 1, 4);
// 使用mapTo
const result$ = source$.mapTo('ABC');// 使用map
// const result$ = source$.map(() => 'ABC');result$.subscribe(console.log,null,() => console.log('complete')
);

运行结果：

mapTo源码介绍：

Observable.prototype.mapTo = function (value) {return this.map(x => value);
};

pluck介绍:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/pluck';const source$ = Observable.of({name: 'RxJS', version: 'v4'},{name: 'React', version: 'v15'},{name: 'React', version: 'v16'},{name: 'RxJS', version: 'v5'}
);
const result$ = source$.pluck('name');
result$.subscribe(console.log,null,() => console.log('complete')
);

运行结果：

pluck源码介绍：

var pluck_1 = require('../operators/pluck');function pluck() {var properties = [];for (var _i = 0; _i < arguments.length; _i++) {properties[_i - 0] = arguments[_i];}return pluck_1.pluck.apply(void 0, properties)(this);
}// pluck_1
export declare function pluck<T, R>(this: Observable<T>, ...properties: string[]): Observable<R>;

pluck优点：能够自动处理获取不存在的字段，返回undefined。如使用map，将抛出一个错误：throw new TypeError。。。。

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/pluck';const source$ = Observable.of({name: 'RxJS', version: 'v4'},{name: 'React', version: 'v15'},{name: 'React', version: 'v16'},{name: 'RxJS', version: 'v5'}
);
const result$ = source$.pluck('age');
result$.subscribe(console.log,null,() => console.log('complete')
);

运行结果：