RxJS 6 中基础操作符 map、filter、reduce 讲解及实战演示-JavaScript中文网-JavaScript教程资源分享门户

前言

RxJS 是一款流行的响应式编程库，它提供了丰富的操作符，方便我们对数据流进行处理和转换。其中，map、filter、reduce 是 RxJS 中最基础的操作符，也是我们在日常开发中最常用的操作符。本文将详细讲解这三个操作符的用法，并提供实战演示。

map 操作符

RxJS 中的 map 操作符和 JavaScript 中的 Array.prototype.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

在这个示例中，我们首先使用 from 操作符创建一个数据流，然后使用 map 操作符将数据流中的每个元素乘以 2。最后，我们订阅了新的数据流，并使用 console.log 输出了结果。

除了简单的数值运算，map 操作符还可以进行更复杂的转换。比如，我们可以将一个字符串数组转换为大写形式：

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

const source$ = from(['hello', 'world']);
const result$ = source$.pipe(map(x => x.toUpperCase()));
result$.subscribe(console.log); // 输出 'HELLO', 'WORLD'

在这个示例中，我们使用 toUpperCase 方法将每个字符串转换为大写形式。

需要注意的是，map 操作符并不会改变源数据流中的元素。它只是返回一个新的数据流，其中的元素是经过转换后的结果。如果需要改变源数据流中的元素，可以使用 tap 操作符。

filter 操作符

RxJS 中的 filter 操作符和 JavaScript 中的 Array.prototype.filter 方法类似，它可以根据指定的条件过滤源数据流中的元素，并返回一个新的数据流。下面是一个简单的示例：

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

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

在这个示例中，我们首先使用 from 操作符创建一个数据流，然后使用 filter 操作符过滤出其中的偶数。最后，我们订阅了新的数据流，并使用 console.log 输出了结果。

除了简单的数值运算，filter 操作符还可以进行更复杂的条件过滤。比如，我们可以过滤出一个字符串数组中长度大于 2 的元素：

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

const source$ = from(['hello', 'world', 'rxjs']);
const result$ = source$.pipe(filter(x => x.length > 2));
result$.subscribe(console.log); // 输出 'hello', 'world'

在这个示例中，我们使用 length 属性判断每个字符串的长度是否大于 2。

需要注意的是，filter 操作符并不会改变源数据流中的元素。它只是返回一个新的数据流，其中的元素是满足条件的结果。如果需要改变源数据流中的元素，可以使用 tap 操作符。

reduce 操作符

RxJS 中的 reduce 操作符和 JavaScript 中的 Array.prototype.reduce 方法类似，它可以将源数据流中的元素进行聚合，并返回一个新的数据流。下面是一个简单的示例：

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

const source$ = from([1, 2, 3, 4, 5]);
const result$ = source$.pipe(reduce((acc, cur) => acc + cur, 0));
result$.subscribe(console.log); // 输出 15

在这个示例中，我们首先使用 from 操作符创建一个数据流，然后使用 reduce 操作符将数据流中的元素相加。最后，我们订阅了新的数据流，并使用 console.log 输出了结果。

需要注意的是，reduce 操作符会将源数据流中的所有元素聚合成一个值，并返回一个新的数据流。如果需要将源数据流中的元素转换为一个新的数据流，可以使用 scan 操作符。

实战演示

接下来，我们将结合实际场景，演示 map、filter、reduce 操作符的使用。假设我们有一个购物车，其中包含多个商品，每个商品有名称、价格和数量三个属性。我们需要对购物车进行统计，计算出总价和数量。下面是一个简单的实现：

// javascriptcn.com 代码示例
import { from } from 'rxjs';
import { map, filter, reduce } from 'rxjs/operators';

const cart = [
  { name: 'iPhone 12', price: 6999, quantity: 2 },
  { name: 'iPad Pro', price: 7999, quantity: 1 },
  { name: 'MacBook Pro', price: 13999, quantity: 1 },
];

const totalPrice$ = from(cart).pipe(
  map(item => item.price * item.quantity),
  reduce((acc, cur) => acc + cur, 0),
);

const totalQuantity$ = from(cart).pipe(
  map(item => item.quantity),
  reduce((acc, cur) => acc + cur, 0),
);

totalPrice$.subscribe(price => console.log(`总价：${price}`)); // 输出 总价：34996
totalQuantity$.subscribe(quantity => console.log(`总数：${quantity}`)); // 输出 总数：4

在这个示例中，我们首先定义了一个购物车数组，其中包含三个商品。然后，我们使用 from 操作符将数组转换为数据流，并使用 map 操作符将每个商品的价格和数量相乘，计算出每个商品的总价。接着，我们使用 reduce 操作符将所有商品的总价相加，计算出购物车的总价。

同样地，我们使用 map 操作符将每个商品的数量取出，然后使用 reduce 操作符将所有商品的数量相加，计算出购物车的总数量。

最后，我们订阅了两个新的数据流，并使用 console.log 输出了结果。

总结

本文详细讲解了 RxJS 中的 map、filter、reduce 操作符的用法，并提供了实战演示。这三个操作符是我们在日常开发中最常用的操作符，掌握它们对于提高开发效率和代码质量都有很大的帮助。希望本文能够对大家有所帮助。

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