在 RxJS 中，「映射」是一种常见的数据处理操作符。它可以将一个 Observable 中的每个值转换成另一个值，然后发射出去。
操作符：map
在 RxJS 中，「映射」操作符最常用的就是 map 操作符。它接收一个处理函数作为参数，将 Observable 中的每个值作为该函数的参数，然后将函数的返回值作为发射出去的新值。
下面是一个简单的示例：
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
const source = of(1, 2, 3, 4, 5);
const example = source.pipe(map(value => value * 2));
example.subscribe(console.log); // 输出：2 4 6 8 10该示例中，我们创建了一个 Observable source，它发射了 1 到 5 的五个值。然后我们使用 map 操作符将这些值映射成它们的两倍，并将结果发射出去。
我们可以通过传递不同的处理函数来实现各种不同的映射操作。例如，我们可以将字符串值转换成它们的长度：
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
const source = of('apple', 'banana', 'orange');
const example = source.pipe(map(value => value.length));
example.subscribe(console.log); // 输出：5 6 6在这个示例中，我们创建了一个 Observable source，它发射了三个字符串值。我们使用 map 操作符将这些字符串映射成它们的长度，然后将结果发射出去。
操作符：pluck 和 mapTo
除了常规的 map 操作符，RxJS 还提供了其他两个操作符来实现更特定的映射操作。
pluck操作符：它可以从 Observable 中的每个对象值中提取指定的属性值作为新的发射值。
import { from } from 'rxjs';
import { pluck } from 'rxjs/operators';
const source = from([{ name: 'Alice' }, { name: 'Bob' }, { name: 'Charlie' }]);
const example = source.pipe(pluck('name'));
example.subscribe(console.log); // 输出：Alice Bob Charlie在该示例中，我们创建了一个 Observable source，它发射了三个对象值。我们使用 pluck 操作符从这些对象中提取 name 属性的值，并将其作为新的发射值。
mapTo操作符：它可以将 Observable 中的每个值都替换成一个固定值，并将该值作为新的发射值。
import { from } from 'rxjs';
import { mapTo } from 'rxjs/operators';
const source = from([1, 2, 3]);
const example = source.pipe(mapTo('Hello'));
example.subscribe(console.log); // 输出：Hello Hello Hello在该示例中，我们创建了一个 Observable source，它发射了三个数字值。我们使用 mapTo 操作符将这些数字值映射成字符串 'Hello'，并将其作为新的发射值。
总结
「映射」是 RxJS 中最常用的数据处理操作之一。通过使用 map 操作符和其他相关操作符（如 pluck 和 mapTo），我们可以轻松地将一个 Observable 中的值转换成另一个形式，并发射出去。
不论是从前端应用程序的角度还是从数据处理的角度来看，「映射」都是一项值得深入学习和掌握的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ddfb39f6b2d6eab39473e6