掌握 RxJS：使用 window、windowToggle 和 groupBy 揭秘 Observable Operators 的奥秘

2023-10-13 02:39:18

窗口操作符：让Observable释放更强大能量

在ReactiveX JavaScript（RxJS）的世界中，Observable是一个强大的工具，它以数据流的形式传输数据。而操作符是RxJS赋予Observable超能力的法宝，让它们可以执行各种复杂的处理。其中，window、windowToggle和groupBy这三个窗口操作符，能够将普通Observable变成高级Observable，释放出更加强大的能量。

Window：按量分组，分批处理

window操作符可以将Observable中的元素按照指定数量进行分组，形成一个一个的窗口。每个窗口里，只包含指定数量的元素。使用场景很多，比如需要分批次处理大数据流、或者需要在每组数据处理完毕后再触发后续操作。

比如，我们有一个Observable发出了一连串的数字：

const numbers = Observable.from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

使用window操作符，我们可以将其按每3个一组进行分割：

const windowedNumbers = numbers.pipe(window(3));

windowedNumbers发出的就是一个Observable的数组，每个Observable里包含了3个数字：

[ [1, 2, 3], [4, 5, 6], [7, 8, 9], [10] ]

WindowToggle：动态开关，灵活掌控

与window操作符类似，windowToggle操作符也可以将Observable分割成窗口。但它多了个开关，这个开关由另一个Observable控制。当开关开启时，windowToggle操作符就开始收集元素，直到开关关闭。这种动态的控制方式，让它能更加灵活地处理数据流。

// 创建一个开关Observable，每3个数字发出一个值
const toggleObservable = Observable.interval(3).mapTo(true);

// 使用windowToggle操作符，用开关Observable控制窗口
const windowedNumbers = numbers.pipe(windowToggle(toggleObservable, () => Observable.interval(2).mapTo(false)));

这样，windowedNumbers发出的Observable数组就会根据开关Observable的节奏进行分组。每当开关开启时，就收集3个数字；开关关闭后，就停止收集。

GroupBy：按键分组，分类汇总

groupBy操作符的功能更强大，它可以将Observable中的元素按指定键进行分组，形成一个分组对象。每个分组对象里，包含了所有具有相同键的元素。这样，我们可以对不同分组的数据进行分类汇总，方便后续处理。

const fruits = Observable.from(['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig']);

// 按第一个字母分组
const groupedFruits = fruits.pipe(groupBy(fruit => fruit[0]));

groupedFruits发出的就是这样一个分组对象：

{
  'a': Observable.of('apple', 'elderberry'),
  'b': Observable.of('banana'),
  'c': Observable.of('cherry'),
  'd': Observable.of('durian'),
  'e': Observable.empty(),
  'f': Observable.of('fig')
}