RxJS 中的 window、groupBy 和 bufferCount 操作符的区别

RxJS 是一种 JavaScript 库，提供了响应式编程的能力，其主要功能是对事件流进行操作，包括：创建、转换、聚合和订阅事件流。在 RxJS 中，有许多操作符可以被用来操作事件流。在本文中，我们将重点介绍 RxJS 中的三个操作符：window、groupBy 和 bufferCount，以帮助读者更好的理解它们之间的区别和如何使用它们。

window

window 操作符将事件流分割成多个小的事件流。它接收一个参数，该参数指定了要生成的事件流的最大大小。window 操作符将处理的事件流分成多个事件，并生成一个新的事件流，其中每个事件都代表处理的事件流的一小部分。可以使用 subscribe() 函数订阅这个新的事件流，其生成的事件是由处理的事件流的子集组成的。

下面是一个使用 window 操作符的示例代码：

import { Observable } from 'rxjs';

const numbers = Observable.interval(1000);
const windowedNumbers = numbers.window(3);

windowedNumbers.subscribe({
  next: (val) => console.log('Sub Window:', val),
});

在上面的代码中，我们定义了一个每秒发出新值的事件流 numbers，并使用 window(3) 操作符将它切分成大小为 3 的窗口。最后使用 subscribe() 函数来订阅新生成的事件流。当执行该程序时，结果如下：

Sub Window: Observable { _isScalar: false, ... }
Sub Window: Observable { _isScalar: false, ... }
Sub Window: Observable { _isScalar: false, ... }
Sub Window: Observable { _isScalar: false, ... }
Sub Window: Observable { _isScalar: false, ... }
Sub Window: Observable { _isScalar: false, ... }
Sub Window: Observable { _isScalar: false, ... }

从输出中可以看出，原始的事件流被分成了多个大小为 3 的窗口，并且每个窗口都作为一个新的事件流被分发。

groupBy

groupBy 操作符将事件流分组成多个小的事件流，每个小事件流都有相同的键。可以使用键在订阅期间访问每个小事件流以处理它们。它接收一个参数，该参数是一个函数，用于计算事件流的键。

下面是一个使用 groupBy 操作符的示例代码：

// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { groupBy, mergeMap, toArray } from 'rxjs/operators';

const source = of(
  { name: 'JavaScript', score: 80 },
  { name: 'TypeScript', score: 90 },
  { name: 'Java', score: 90 },
  { name: 'JavaScript', score: 95 },
  { name: 'Java', score: 85 },
);

const grouped = source.pipe(
  groupBy((data) => data.name),
  mergeMap((group) => group.pipe(toArray()))
);

grouped.subscribe({
  next: (val) => console.log(val),
});

在上面的代码中，我们定义了一个包含多个对象的事件流。每个对象都有一个名称和一组分数。我们使用 groupBy 操作符将事件流按名称分为多个小事件流，并将这些小事件流的分数收集到单个数组中。最后，使用 subscribe() 函数来订阅新生成的事件流。当执行该程序时，结果如下：

// javascriptcn.com 代码示例
[
  { name: 'JavaScript', score: 80 },
  { name: 'JavaScript', score: 95 }
],
[
  { name: 'TypeScript', score: 90 }
],
[
  { name: 'Java', score: 90 },
  { name: 'Java', score: 85 }
]

从输出中可以看出，原始事件流按名称分为了三组，每组都有一个包含了多个分数的数组。

bufferCount

bufferCount 操作符将事件流分割成大小相等的缓冲区，每个缓冲区都是一个数组。它接收两个参数，第一个参数是缓冲区的大小，第二个参数是可选的，用于缓冲区的偏移量。当指定了偏移量时，每次缓冲区向前滑动指定的数量，这会导致新的值被添加到缓冲区中，同时从缓冲区的开始部分删除相同数量的值。

下面是一个使用 bufferCount 操作符的示例代码：

import { Observable } from 'rxjs';

const numbers = Observable.interval(1000);
const bufferedNumbers = numbers.bufferCount(3, 1);

bufferedNumbers.subscribe({
  next: (val) => console.log('Sub Buffer:', val),
});

在上面的代码中，我们定义了一个每秒发出新值的事件流 numbers，并使用 bufferCount(3, 1) 操作符将它切分成大小为 3 的缓冲区，并指定每个缓冲区向前滑动一个元素。最后使用 subscribe() 函数来订阅新生成的事件流。当执行该程序时，结果如下：

// javascriptcn.com 代码示例
Sub Buffer: [0, 1, 2]
Sub Buffer: [1, 2, 3]
Sub Buffer: [2, 3, 4]
Sub Buffer: [3, 4, 5]
Sub Buffer: [4, 5, 6]
Sub Buffer: [5, 6, 7]
Sub Buffer: [6, 7, 8]
Sub Buffer: [7, 8, 9]
Sub Buffer: [8, 9, 10]
Sub Buffer: [9, 10, 11]

从输出中可以看出，原始的事件流被分成了多个大小为 3 的缓冲区，并且每个缓冲区都向前滑动了一个元素。

区别和总结

window、groupBy 和 bufferCount 操作符都可以将事件流分割成小的事件流或缓冲区，并对这些小事件流或缓冲区进行进一步处理。它们之间的不同点在于：window 操作符用于按大小分割事件流，groupBy 操作符用于按键分组事件流，而 bufferCount 操作符则用于按大小分割缓冲区。

事实上，在实际开发中，我们通常需要根据具体的需求来选择使用哪个操作符。例如，如果我们需要将事件流分成相等大小的子事件流，则应该使用 window 操作符。如果我们需要将事件流按名称分为多组，则应该使用 groupBy 操作符。如果我们需要将事件流分成相等大小的缓冲区，则应该使用 bufferCount 操作符。

总之，RxJS 中提供了许多操作符，可以帮助我们对事件流进行高效的操作和处理。熟练掌握这些操作符，将有助于我们编写更加高效和可靠的 RxJS 程序。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653e1dfc7d4982a6eb7b148f