引言
RxJS 是一个被广泛应用于前端开发的响应式编程库，它能够让我们更加高效地处理异步数据流，能够通过流模型高度抽象异步数据流并进行操作。这里，我们将介绍 RxJS 中 Buffer 和 Window 两个操作符的原理和应用，并提供一些使用示例。
Buffer 操作符
Buffer 操作符能够按时间间隔或数据数量将数据流分成多个小的数据集合，处理完成后，返回一个 Observable 它会发射这些缓存的集合。
理解 Buffer 操作符
Buffer 操作符需要一个参数，这个参数可以是一个数字或者是一个 Observable。当参数为数字时，它代表时间（单位为毫秒）；当参数为 Observable 时，它通过 Observable 对象来控制缓存的大小，这是类似于动态缓存。
Buffer 操作符首先监听数据流的源 Observable，当检测到源数据流的数据时，就开始为数据流创建缓存，同时也会开始计时（当参数为数字时），被缓存的数据会存入这个缓存数组中，当缓存数组的数量达到了所设定的上限或者缓存时间到达设定时间时，Buffer 就会触发发送一个包含了所有存储在缓存数组中的数据的 Observable。
Buffer 操作符的应用
Buffer 操作符是一个既可以用于事件时间序列也可以用于数据序列的操作符。在前端开发中，我们可以使用 Buffer 操作符来处理多个事件触发导致的数据，比如键盘输入。此外，Buffer 可以被用来解决并发请求数的问题，比如请求 API 数据时要限制每个页面的请求次数。
代码示例
import { interval } from 'rxjs';
import { buffer } from 'rxjs/operators';
const source = interval(1000);
const bufferTimeSpan = 5000;
const result = source.pipe(buffer(bufferTimeSpan));
result.subscribe(x => console.log(x));上面的代码是一个最简单的 Buffer 操作示例，它使用了 interval 操作符（每秒生成一个新的数字）创建了一个 Observable 对象，然后使用 Buffer 操作符将五秒之内每秒发射的数字缓存起来，最后将这些数字作为一个数组保存在 result 中。
Window 操作符
Window 和 Buffer 操作符非常相似，但是它不是将多个元素缓存到同一个数组中，而是将它们缓存在单独的子 Observable 中。当条件满足时，每个子 Observable 将被发送给下游的消费者。
理解 Window 操作符
相比于 Buffer 操作符，Window 操作符会为每个数据流的缓存命名为不同的单独的 Observable，从而更好地管理数据流。根据传入 Window 操作符的参数，将源 Observable 分解为由缓存区间（缓存元素的数量）确定的窗口，每个窗口所归纳的元素都将被放入单独的、由子 Observable 维护的流中。被归入每个子 Observable 中的元素可以通过下游流的 subscribe 方法获取。
Window 操作符的应用
Window 操作符可以被用来按照指定大小对源 Observable 元素进行分组操作，每个组的大小通过一个数值参数确定。例如，假设我们要将一个用于购物车中的购买商品列表分成多组，每组不超过限定的总价。在这个场景下，我们可以将商品列表分成多个 Observable 子流进行处理。
代码示例
import { from } from 'rxjs';
import { windowCount, mergeAll } from 'rxjs/operators';
const source = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const count = 4;
const result = source.pipe(windowCount(count), mergeAll());
result.subscribe(x => console.log(x));上面的代码是一个最简单的 Window 操作示例，它使用了 from 操作符（将数组作为参数传入）创建了一个 Observable 对象，然后使用 Window 操作符将每四个数字分为一组，最后将这些数字的数组保存在 result 中。
总结
在本文中，我们详细介绍了 RxJS 中 Buffer 和 Window 两个操作符的原理和应用，并提供了使用示例。Buffer 操作符能够按时间间隔或数据数量将数据流分成多个小的数据集合；而 Window 操作符将它们缓存在单独的子 Observable 中，主要被用来按照指定大小对源 Observable 元素进行分组操作。通过灵活地使用这两个操作符，我们可以更好地处理和管理异步数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c61c5a4908f32798b28a07