RxJS 操作符大全之转化篇-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一个响应式编程库，它提供了丰富的操作符来处理异步数据流。在之前的文章中，我们介绍了 RxJS 的创建和过滤操作符。本文将重点介绍 RxJS 的转化操作符，它们可以用来转换、合并和拆分数据流，让我们更加高效地处理数据。

map 操作符

map 操作符可以将数据流中的每个元素映射为另一个元素。它的使用方式如下：

import { from } from 'rxjs';
import { map } from 'rxjs/operators';

const source$ = from([1, 2, 3, 4, 5]);
const result$ = source$.pipe(map(x => x * 2));
result$.subscribe(console.log); // 输出: 2, 4, 6, 8, 10

上面的代码中，我们创建了一个包含数字 1 到 5 的数据流 source$，然后使用 map 操作符将每个数字都乘以 2，得到了一个新的数据流 result$。最后，我们订阅了 result$ 并输出了它的值。

pluck 操作符

pluck 操作符可以从数据流中的每个元素中提取指定的属性。它的使用方式如下：

import { from } from 'rxjs';
import { pluck } from 'rxjs/operators';

const source$ = from([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]);
const result$ = source$.pipe(pluck('name'));
result$.subscribe(console.log); // 输出: 'Alice', 'Bob'

上面的代码中，我们创建了一个包含两个对象的数据流 source$，每个对象都有 name 和 age 两个属性。然后使用 pluck 操作符从每个对象中提取 name 属性，得到了一个新的数据流 result$。最后，我们订阅了 result$ 并输出了它的值。

mergeMap 操作符

mergeMap 操作符可以将数据流中的每个元素映射为一个新的数据流，并将这些数据流合并为一个数据流。它的使用方式如下：

import { from } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const source$ = from(['a', 'b', 'c']);
const result$ = source$.pipe(mergeMap(x => from([`${x}1`, `${x}2`])));
result$.subscribe(console.log); // 输出: 'a1', 'a2', 'b1', 'b2', 'c1', 'c2'

上面的代码中，我们创建了一个包含字母 a 到 c 的数据流 source$，然后使用 mergeMap 操作符将每个字母都映射为一个新的数据流，这个新的数据流包含该字母加上数字 1 和 2。最后，我们订阅了合并后的数据流 result$ 并输出了它的值。

switchMap 操作符

switchMap 操作符可以将数据流中的每个元素映射为一个新的数据流，并且只保留最新的数据流，忽略之前的数据流。它的使用方式如下：

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const source$ = fromEvent(document, 'click');
const result$ = source$.pipe(switchMap(() => fromEvent(document, 'mousemove')));
result$.subscribe(console.log);

上面的代码中，我们创建了一个数据流 source$，它会在每次点击页面时发出一个事件。然后使用 switchMap 操作符将每次点击事件映射为一个新的数据流，这个新的数据流会在鼠标移动时发出事件。由于 switchMap 只保留最新的数据流，因此当用户快速点击页面时，之前的鼠标移动事件会被忽略，只有最新的鼠标移动事件会被输出。

partition 操作符

partition 操作符可以将数据流拆分为两个数据流，一个满足条件，另一个不满足条件。它的使用方式如下：

import { from } from 'rxjs';
import { partition } from 'rxjs/operators';

const source$ = from([1, 2, 3, 4, 5]);
const [even$, odd$] = source$.pipe(partition(x => x % 2 === 0));
even$.subscribe(console.log); // 输出: 2, 4
odd$.subscribe(console.log); // 输出: 1, 3, 5

上面的代码中，我们创建了一个包含数字 1 到 5 的数据流 source$，然后使用 partition 操作符将它拆分为两个数据流，一个包含偶数，另一个包含奇数。最后，我们分别订阅了这两个数据流并输出了它们的值。

总结

本文介绍了 RxJS 的转化操作符，它们可以用来转换、合并和拆分数据流。map 操作符可以将数据流中的每个元素映射为另一个元素；pluck 操作符可以从数据流中的每个元素中提取指定的属性；mergeMap 操作符可以将数据流中的每个元素映射为一个新的数据流，并将这些数据流合并为一个数据流；switchMap 操作符可以将数据流中的每个元素映射为一个新的数据流，并且只保留最新的数据流；partition 操作符可以将数据流拆分为两个数据流，一个满足条件，另一个不满足条件。这些操作符可以帮助我们更加高效地处理数据，提高编程效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655cdb4dd2f5e1655d728216