理解 RXJS 可观察输出的问题

Question

我对 rxjs 还很陌生，正在努力学习。

我正在阅读这篇中等文章并试图理解这个 RXJS 输出：

import {Observable} from 'rxjs-es';
let output = Observable.interval(500)
             .map(i => [1,2,3,4,5,6][i]);

let result = output.map(num1 => num1)
    .filter(num1 => num1 > 4)
    .reduce((num1, num2) => num1 + num2);

result.subscribe(number => console.log(number));

输出：27

我不明白输出结果是 27 以及 reduce 是如何工作的（以及 reducer 的这两个参数是什么）。

有人可以启发我这是怎么回事吗？ （我尝试在代码和框上运行它，但是当我运行此代码时它会抛出错误）

Answer 1

了解Filter和化Reduce运算符

正如其他人在评论中提到的那样，您引用的文章使用的是具有不同语法的旧版本 rxjs。 对于此示例，我将使用从版本 6 开始的较新语法。

在 rxjs 中，有多种运算符可用于转换通过流发出的值。 通常这些是导入的：

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

还有许多生成器函数可用于创建值流。 interval是这些函数之一，它将创建一个每n毫秒发出一个连续整数的流。 进口如：

import { interval } from 'rxjs';

让我们创建一个简单的流：

number$ = interval(1000); // emit number every 1 second
// output: 0, 1, 2, 3, 4, 5...

我们可以将运算符应用于此流以转换排放：

filter的使用非常简单。 它只是发出通过给定真值测试的值（与Array.filter()方法完全一样）。

numbersLessThan4$ = numbers$.pipe(
    filter(number => number < 4)
);
// output: 0, 1, 2, 3

reduce运算符稍微复杂一些，其行为就像Array.reduce()方法。 一个函数被应用于每个发出的值，并且能够存储一个值，在评估下一次发出时可以引用该值。

reduce需要两个参数。 第一个是接收当前发射 ( cur ) 和先前累积结果 ( acc ) 并返回新累积值的函数。 第二个是acc的初始值。

例子：

sumOfNumbers$ = numbers$.pipe(
    reduce((acc, cur) => acc + cur, 0)
);

所以，让我们看看当numbers$发出前 3 个数字时reduce做了什么：

• 0
  • cur接收当前的发射值0
  • acc以提供的默认值0开头
  • 表达式acc + cur返回0
• 1
  • cur接收当前的发射值1
  • acc接收先前返回的值0
  • 表达式acc + cur返回1
• 2
  • cur接收当前的发射值2
  • acc接收先前返回的值1
  • 表达式acc + cur返回3

所以这很酷。 我们可以在一行简单的代码中得到相当多的逻辑。 关于reduce一件重要的事情是它在源observable 完成之前不会发出。 目前， numbers$永远不会完成（ interval()无限期地发出连续整数）。

在发出一定数量的值后，我们可以使用take()运算符来完成流。

例子：

numbers$ = interval(1000).pipe(take(5)); // completes after 5 emissions

sumOfNumbers$ = numbers$.pipe(
    // receives 5 values (0, 1, 2, 3, 4) and performs the logic described above.
    reduce((acc, cur) => acc + cur, 0) 
);
// output: 10

可以使用多个运算符来转换排放。 只需在pipe()内提供多个：

sumOfNumbersLessThan4$ = numbers$.pipe(
    filter(number => number < 4),
    reduce((acc, cur) => acc + cur, 0) 
);
// output: 6