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

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')
);

运行结果：

 从以上demo可以看到：map是映射操作之母，mapTo和pluck都可以基于map实现。