理解 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