在前端开发中，经常会遇到需要对大型数据集或计算密集型操作进行分段处理的场景。这时候，一个好用的分段计算工具就显得尤为重要。今天，我们就来介绍一款npm包：compute-chunkify，它可以快速地将大型数据集分段处理，非常适合前端数据处理的场景。
compute-chunkify 简介
compute-chunkify 是一款基于原生 JavaScript 的工具，它能够将一个很长的可迭代对象分成多个块，并将这些块传递给指定的函数进行处理。它的主要特点有：
- 支持处理大量的数据
- 支持并行执行
- 能够通过Promise，async/await等方式进行异步操作
- 良好的扩展性
它的源代码托管地址为：https://github.com/gdibble/compute-chunkify
可以通过npm直接安装使用：
npm install compute-chunkify
compute-chunkify 的基础用法
compute-chunkify 主要包含一个函数 chunkify()，它接收三个参数：
iterable: 待处理的可迭代对象，例如一个数组或者一个生成器函数chunkSize: 分段大小，即将原有数据按多大块进行分段，默认为1000000fn: 处理函数，即每个块执行的代码
-- -------------------- ---- -------
----- -------- - ----------------------------
----- ---- - ------------ ------- -------- -- --- -- -- ---
----- --------- - ------- -- -
----------------------- ------ -- -------
------ -------------- -- ---- - ---
--
-------------- -------- ---------------------- -- -
---------------------
-------------------- -- ---------------
----------------------以上示例代码中，我们生成了一个长度为 10000000 的数字数组作为待处理对象。其中，processor 函数接受每个块的数组，将其中的所有元素乘以 2 并返回该数组。最终，我们通过 Promise 的方式将结果打印到控制台。
compute-chunkify 的深度使用
上面展示的仅仅是 compute-chunkify 的基本用法。在实际开发中，我们很有可能需要更加复杂的计算或者数据处理，这时候，我们就需要用到 compute-chunkify 更多的特性了。
可扩展和可配置
compute-chunkify 设计为非常灵活和可配置的，你可以通过以下三个方法进行个性化定制：
chunkStart
每个块的开始元素，默认情况下块的第一个元素即为开始元素
const getChunkStart = (chunkIndex, chunkSize) => chunkIndex * chunkSize // 提供自定义函数计算块的开始元素
chunkify(data, { chunkStart: getChunkStart, ...otherOpts }, processor)chunkEnd
每个块的结束元素，默认情况下块的最后一个元素即为结束元素
const getChunkEnd = (chunkIndex, chunkSize, len) => Math.min((chunkIndex + 1) * chunkSize, len) // 提供自定义函数计算块的结束元素
chunkify(data, { chunkEnd: getChunkEnd, ...otherOpts }, processor)transferListOpts
指定最终结果转换为 Transferable 类型。比如可以使用它对大对象进行分块处理后，性能有较大提升。
const ab = new ArrayBuffer(10 * 1024 * 1024);
// do something to `ab`
chunkify([ab], {
transferListOpts: { // 通过指定参数将最终结果转换为Transferable类型
contexts: [ab], // 传递 buffer、iamgeData、offscreenCanvas等像素相关数据的上下文环境
}
}, processor);Promise Convention
compute-chunkify 会使用 Promise 链来协调分段操作，以方便使用 Promise 语法处理结果。这意味着你可以使用 Promise.then()/ Promise.catch() 或者 async/await 等方式来处理结果。
chunkify(data, { chunkSize: 100000 }, processor)
.then(finalRes => {
// process the final result
})
.catch(console.log);(async function() {
try {
let finalRes = await chunkify(data, { chunkSize: 100000 }, processor);
// process the final result
} catch (e) {
console.log(e);
}
})();并行操作
comput-chunkify 是一款支持并行操作的 npm 包，即多个块可以并行执行。这个特性可以让我们在处理大量数据时更加高效。
-- -------------------- ---- -------
----- --------- - ------- -- -
----------------------- ------ -- -------
------ -------------- -- ---- - ---
--
-------------- - ---------- ------- --------- - -- ----------
------------ -- -
---------------------
-------------------- -- ---------------
----------------------在以上示例中，我们加入了 parallel 参数用于指定每次执行的并行度。在这里我们将并行度设置为 3，这就意味着将同时运行三个块的处理函数。
通过测试，当我们不开启并行处理时，处理 10000000 个数据项的操作需要执行约 1 秒钟。而如果我们开启并行处理，处理时间可以减少到几百毫秒左右。
总结
compute-chunkify 是一款非常实用的 npm 包，它可以帮助我们快速地处理大量数据。在前端开发中，这种处理数据的工具越来越重要，能够在保证数据处理质量的同时提高开发效率。
这篇文章通过详细的介绍 compute-chunkify 的使用方法和其内部实现特性，希望能够帮助读者更好地理解这个 npm 包，并在实际开发中运用自如。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6ba5