javascript - 想要使用：rxjs 对流里面的元素进行操作（找出偶数，并且乘以2），为何不生效呢？

Question

想要使用：rxjs 对流里面的元素进行操作（找出偶数，并且乘以2）

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

但是打印的时候并没有任何数据，请问是代码写的有误吗？

Answer 1

of接受多个参数 你只传入了一个数组 流出的只是一个完整的数组 of(1,2,3,4,5,6)

Answer 2

可以看看 AI 的参考答案，把 of 改为 from

Answer 3

代码确实存在错误，主要问题在于你正在对一个数组而不是单个元素应用 filter 和 map 操作符。在 RxJS 中，当你使用 of 操作符时，它会将数组 [1,2,3,4,5] 当作一个单独的、完整的数组对象来发射，而不是作为单个数字发射。因此，filter 操作符接收到的是一个数组对象，而不是数组中的每个元素，且由于数组对象本身不是偶数，所以 filter 条件不会通过。

为了修复这个问题，你应该使用 from 而不是 of 来将数组转换为流中的单个元素，每个元素依次发射。以下是修改后的代码：

import { from } from 'rxjs';
import { filter, map } 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 会将数组 [1, 2, 3, 4, 5] 转换为一个 Observable，该 Observable 会依次发射数组中的每个元素（1, 2, 3, 4, 5）。然后，filter 和 map 操作符会分别作用于这些单独发射的元素上，从而实现找出偶数并乘以2的逻辑。最后，你会在控制台看到 4 和 8 被打印出来。