介绍
RxJS 是一个强大的响应式编程库，它的数据流能够让代码具有更好的可读性和可维护性。buffer() 函数是 RxJS 中一种非常方便的操作符。它可以将数据流分组为一组新的流。
在实际的前端开发中，我们经常会遇到需要对连续的数据流进行一定规律的分组处理。例如在某个 Web 应用中，用户需要上传多个文件，我们就可以使用 buffer() 函数将上传的文件分为几个组，以实现更优秀的上传体验。
在本篇文章中，我们将深入学习 buffer() 函数，并通过示例代码来演示如何在 RxJS 中使用它。
核心概念
buffer() 函数用于将源 Observable 数据流中的数据分组成数组。最终得到一个新的 Observable 数据流，流中的每个元素都是一个数组，数组中包含了一定数量的源数据流元素。
buffer() 函数接受一个参数，即 Observable 数据流，代表新的分组数据流的开端。当源数据流中产生新的元素时，buffer() 函数将其添加到一组数据中。一旦达到指定的分组条件，则会发送分组数据流，并清空缓存的数据，来创建下一组分组数据流。
下面是 buffer() 函数示例代码：
import { interval } from 'rxjs';
import { buffer } from 'rxjs/operators';
const source = interval(1000);
const sourceBuffered = source.pipe(buffer(interval(3000)));
sourceBuffered.subscribe(val => console.log('Buffered', val));上面的示例代码中，我们先定义了一个 interval(1000) Observable 数据流，它会每隔一秒钟产生一个数据元素。接着，我们将 interval(3000) Observable 数据流传递给 buffer() 函数，代表新的分组数据流的开始。因此，每隔 3000 毫秒就会将前三秒内的源数据流数据分为一组，发送给新的 Observable 数据流，并清空缓存的数据，以开始下一组新的数据组。
这是一个非常简单的例子，实际使用中，我们可以灵活地将 buffer() 函数用于数据流的不同场景。
实例代码
下面我们来看一个更为深入的 buffer() 函数示例，代码中实现了在某个 Web 应用中，用户上传多个图片，我们需要以 3 张为一组进行上传，同时可以观察上传结果：
-- -------------------- ---- -------
------ - ---------- ----- - ---- -------
------ - ---- ------------ -------- - ---- -----------------
----- ------------ - ---------------------------------
----- ------------ - ----------------------------------
----- ------- - ----------------------- ----------
----- ------ - ----------------------- ---------
----- -------- - -------------
----------- -- --------------------
-------------- -- -
----- ------- - -----------------
------------- -- -
----- -------- - --- -----------
----------------------- ------
------ -------------------- ----------
--
--
------ -----------------------------
--
--
----- ------------------ - ------------- ---------------------------------在上面的代码中，我们首先通过 fromEvent() 建立了 file input 的 change 事件和 upload button 的 click 事件，并将它们合并成一个总的 Observable 数据流。当文件上传窗口有新文件被选择，或者点击了上传按钮时，该 Observable 数据流就会触发。
接着，我们使用 map() 操作符将事件目标的 files 属性提取出来，也就是被选中的文件列表，然后使用 mergeMap() 操作符对每个文件进行上传处理。在上传单个文件的操作中，我们使用了 RxJS 的 ajax 帮助函数，它会返回一个 Observable 数据流，这里我们不再进行详细介绍。
最后，我们使用 bufferCount() 操作符将上传完成的文件按照 3 张文件一组，组成一批上传结果数据流。这里我们将结果数据流和点击事件流 merge() 起来，便可以能够观察上传结果。
结论
buffer() 函数是 RxJS 中的一个非常有用的操作符，对于需要对前端数据流进行分组处理的应用场景，有着强大的辅助作用。本文中，我们首先介绍了 buffer() 函数的核心概念，然后以示例代码的形式讲解了该函数在实际前端开发中的应用。我们相信本文能够为初学者和进阶者学习和使用 RxJS 提供一定的参考意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672365202e7021665e0fe0a9