RxJS 是一个针对异步编程的 JavaScript 库，提供了一组丰富的操作符以及强大的响应式编程功能。其中之一就是 bufferCount 操作符，它用于将源 Observable 中的数据缓存为数组，当缓存的数据达到指定数量时，将缓存在数组中的数据一起发送出去。
bufferCount 操作符的语法
bufferCount 操作符的语法如下所示：
bufferCount(bufferSize: number, startBufferEvery: number = null): Observable<T[]>
其中，bufferSize 表示每个缓存数组的长度，startBufferEvery 表示缓存数组启动所需的项数。如果不指定 startBufferEvery，则默认情况下，每次缓存完 bufferSize 个数据后立即发送缓存的数组，并开始新的缓存。如果指定了 startBufferEvery，则每隔指定的项数就会创建一个新的缓存数组，并将之前的缓存数组发送出去。
bufferCount 操作符的实例
下面是一个基本的例子，当源 Observable 中的数据数量达到 3 个时，将它们作为一个数组缓存并一起发送出去。
import { from } from 'rxjs';
import { bufferCount } from 'rxjs/operators';
const source = from([1, 2, 3, 4, 5]); // 创建源 Observable
const buffer = source.pipe(bufferCount(3)); // 使用 bufferCount 缓存每 3 个数据
buffer.subscribe(val => console.log(val)); // 输出缓存的结果输出结果如下：
[1, 2, 3] [4, 5]
如上所示，缓存的结果是一个数组，每当缓存的数据达到指定大小后，将它们一起发送出去。
下面是一个带有 startBufferEvery 参数的实例，每隔两个数据就会缓存并发送数据。
import { from } from 'rxjs';
import { bufferCount } from 'rxjs/operators';
const source = from([1, 2, 3, 4, 5, 6, 7, 8, 9]); // 创建源 Observable
const buffer = source.pipe(bufferCount(3, 2)); // 使用 bufferCount 缓存每 3 个数据，并在第 2 个数据开始缓存
buffer.subscribe(val => console.log(val)); // 输出缓存的结果输出结果如下：
[1, 2, 3] [3, 4, 5] [5, 6, 7] [7, 8, 9]
bufferCount 操作符的实际应用
bufferCount 操作符在实际应用中非常有用。例如，当需要从一个源 Observable 中发送给第三方 API 的数据达到一定数量后再进行批量操作时，就可以使用 bufferCount 操作符来实现。此外，在用户进行搜索时，可以使用 bufferCount 操作符来缓存用户的搜索历史，当搜索历史达到一定长度时，可以调用后端 API 进行推荐，这是一个很常见的应用场景。
注意事项
在使用 bufferCount 操作符时，需要注意以下几个事项：
- bufferSize 的值必须大于 0，否则将抛出错误。
- 如果 startBufferEvery 的值小于 bufferSize，则每个缓存数组将会存在重叠，这会导致发送的数据中包含重复的数据。
总结
RxJS 的 bufferCount 操作符是一种将 Observale 中的数据缓存为数组并批量发送的方法。它支持指定缓存的长度和启动缓存所需的项数，非常适合批量处理数据等场景。在实际应用中，我们可以灵活地利用 bufferCount 操作符完成各种复杂的异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476ebda968c7c53b0384ecf