RxJS 流处理：偶数乘以二的陷阱与解法
在使用 RxJS 处理异步数据流时，一些细微的差别可能导致代码无法按预期工作。本文将分析一个常见的 RxJS 问题：对流中元素进行操作，例如找出偶数并乘以 2，代码失效的原因及解决方法。
问题：of 操作符的误用
假设我们有一个包含数字 [1, 2, 3, 4, 5] 的数据流，目标是筛选出偶数并将其乘以 2。 我们可能会尝试以下 RxJS 代码：
import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const e = of([1, 2, 3, 4, 5]);
e.pipe(
filter(item => item % 2 === 0),
map(num => num * 2)
).subscribe(v => console.log(v));
这段代码预期输出 4 和 8，但实际上没有任何输出。原因在于 of 操作符的行为。of 操作符将传入的参数视为单个值发射出去，而不是将数组拆分成独立的元素。 因此，filter 操作符接收的是整个数组 [1, 2, 3, 4, 5]，而不是数组中的单个数字。由于数组本身不能被认为是偶数，filter 过滤掉了整个数组，导致没有值传递到 map 操作符。
解法：使用 from 操作符
为了解决这个问题，我们需要使用 from 操作符将数组分解成单个元素的流。修改后的代码如下：
import { from } from 'rxjs';
import { map, filter } from 'rxjs/operators';
const e = from([1, 2, 3, 4, 5]);
e.pipe(
filter(item => item % 2 === 0),
map(num => num * 2)
).subscribe(v => console.log(v));
现在，from 操作符会将数组中的每个数字作为独立的 observable 值发射，filter 和 map 操作符将能够正确地处理这些值，最终输出预期的结果：4 和 8。
通过这个例子，我们了解到在 RxJS 中选择正确的操作符至关重要。 of 和 from 虽然都用于创建 observable，但它们处理数据的方式截然不同。 理解这些差异可以帮助我们避免常见的 RxJS 陷阱，编写更健壮和高效的代码。
