js 如何用chunk将数组分割为多个小块

数组分块的核心思路是通过遍历原数组并以固定步长使用slice方法截取子数组，直到末尾；2. 分块主要用于优化大数据量下的渲染性能、实现分批数据传输、提升用户体验及满足特定ui布局需求；3. 除基础for循环外，还可使用reduce实现声明式分块、借助lodash的chunk函数简化操作，或利用生成器函数进行内存友好的按需生成；4. 常见注意事项包括处理无效size、空数组输入、size大于数组长度等情况，并需关注slice带来的内存开销及保持原始数据不可变性，选择方案时应综合考虑场景、性能与可读性，最终返回一个由子数组组成的全新二维数组结束。

将JavaScript数组分割成多个小块（或者说“分块”，chunking）的核心思路，就是遍历原数组，并以固定的步长截取子数组，直到原数组的末尾。这在处理大量数据、优化渲染性能或进行数据分批传输时非常有用。

解决方案

function chunkArray(arr, size) {
  // 面对现实吧，如果输入的不是数组，或者分块大小不合理，
  // 我们就没法“好好”分块。这里我选择返回一个空数组，
  // 或者你也可以抛出错误，看你对健壮性的要求有多高。
  if (!Array.isArray(arr) || size <= 0) {
    console.warn("输入数组无效或分块大小不合理，无法进行有效分块。");
    return [];
  }

  const chunkedArr = [];
  for (let i = 0; i < arr.length; i += size) {
    // slice 方法在这里就显得很优雅，它不会修改原数组，
    // 而是返回一个新的子数组，完美符合我们的需求。
    chunkedArr.push(arr.slice(i, i + size));
  }
  return chunkedArr;
}

// 实际使用起来大概是这样：
// const myBigArray = Array.from({ length: 25 }, (_, i) => i + 1);
// const smallChunks = chunkArray(myBigArray, 7);
// console.log(smallChunks);
/*
输出会是：
[
  [1, 2, 3, 4, 5, 6, 7],
  [8, 9, 10, 11, 12, 13, 14],
  [15, 16, 17, 18, 19, 20, 21],
  [22, 23, 24, 25] // 最后一个块可能不满7个
]
*/

为什么我们需要对数组进行分块处理？

这问题问得好，毕竟不是所有数组操作都需要这么“折腾”。在我看来，对数组进行分块处理，往往是出于性能、用户体验或特定业务逻辑的考量。想象一下，你有一个包含几万甚至几十万条数据的巨大列表要渲染到页面上，如果一次性全部处理并插入DOM，浏览器很可能直接卡死，用户体验会非常糟糕。这时候，把大数组分成小块，每次只渲染一小部分，然后通过懒加载或虚拟滚动等技术逐步加载，就能大大提升页面的响应速度和流畅度。

再比如，我们可能需要将大量数据通过API发送到后端。如果单次请求的数据量过大，不仅可能超出服务器的限制，还可能导致网络传输效率低下。将数据分块后，可以分批次发送请求，既能规避单次请求的限制，又能提高数据传输的稳定性。这就像是搬家，一次搬一整栋楼的东西肯定吃不消，但分成一箱一箱地搬，就轻松多了。有时候，它也用于UI布局，比如你需要一个网格布局，每行固定显示N个元素，那么把数组按N个一组分块，直接映射到行，逻辑就非常清晰了。

除了基础循环，还有哪些数组分块的实现思路？

除了上面那种最直观的

for

slice

一个常见的替代方案是使用

reduce

function chunkArrayWithReduce(arr, size) {
  if (!Array.isArray(arr) || size <= 0) {
    return [];
  }
  return arr.reduce((acc, _, index) => {
    // 每次迭代，我们只关心当前元素是否是新块的起点
    if (index % size === 0) {
      acc.push(arr.slice(index, index + size));
    }
    return acc;
  }, []);
}

// console.log(chunkArrayWithReduce(myBigArray, 7)); // 结果一样

reduce

for

for

如果你在项目中已经引入了像 Lodash 这样的工具库，那么恭喜你，一行代码就能搞定：

_.chunk(array, [size=1])

chunk

chunk

还有一种更高级的思路，尤其适用于处理极大的数组，是使用生成器函数（Generator Functions）。生成器不会一次性生成所有的块并存储在内存中，而是“按需”生成。当你需要下一个块时，它才计算并返回，这对于内存优化非常有帮助。

小浣熊家族

小浣熊家族是基于商汤自研大语言模型的AI助手，提供代码小浣熊AI助手、办公小浣熊AI助手两大功能模块

71

查看详情

function* chunkArrayGenerator(arr, size) {
  if (!Array.isArray(arr) || size <= 0) {
    // 发生器里通常不会直接返回，而是可能抛出错误或yield空
    return;
  }
  for (let i = 0; i < arr.length; i += size) {
    yield arr.slice(i, i + size);
  }
}

// 使用时你需要遍历这个生成器
// const generator = chunkArrayGenerator(myBigArray, 7);
// for (const chunk of generator) {
//   console.log(chunk);
// }
// 或者如果你真的需要所有块，可以展开它：
// const allChunks = [...chunkArrayGenerator(myBigArray, 7)];
// console.log(allChunks);

生成器在处理无限数据流或者只需要部分结果的场景下非常强大，但在简单的数组分块中，它的优势可能不那么明显，除非数组真的大到会爆内存。

数组分块时常见的坑和需要注意的细节有哪些？

写一个

chunk

1. 无效的

   chunkSize

   登录后复制
   ： 如果

   size

   登录后复制
   是

   0

   登录后复制
   、负数，或者不是数字，你的函数应该如何表现？是抛出错误，还是返回空数组，亦或是原数组？我的建议是，对于

   size <= 0

   登录后复制
   的情况，返回空数组并给出警告通常是比较友好的做法，避免程序崩溃。

2. 空数组输入：

   chunkArray([], 3)

   登录后复制
   应该返回什么？一个空数组

   []

   登录后复制
   是最合理的预期。我的示例代码已经考虑了这一点。

3. chunkSize

   登录后复制
   大于数组长度：

   chunkArray([1, 2, 3], 10)

   登录后复制
   应该返回

   [[1, 2, 3]]

   登录后复制
   。这也是

   slice

   登录后复制
   方法的特性决定的，它在索引超出范围时会自然地处理。

4. 性能考量：

   slice

   登录后复制
   的开销： 尽管

   slice

   登录后复制
   是一个非常方便的方法，但每次调用它都会创建一个新的数组。对于一个包含数百万元素的巨大数组，并且

   chunkSize

   登录后复制
   很小（比如

   1

   登录后复制
   ），这意味着你会创建数百万个新的数组对象，这会带来显著的内存开销。在绝大多数日常应用中，这并不是问题，但在处理极端大数据量时，你需要意识到这一点。在这些极端情况下，可能需要更底层的循环，甚至考虑使用

   TypedArray

   登录后复制
   来优化内存。

5. 数据的不可变性： 我上面给出的

   chunkArray

   登录后复制
   函数都是“纯函数”的典范，它们不会修改原始数组

   arr

   登录后复制
   ，而是返回一个全新的分块数组。这在函数式编程中是一个非常重要的原则，可以避免很多难以追踪的副作用。确保你的分块函数也遵循这个原则。

总的来说，数组分块是一个看似简单却蕴含不少工程考量的操作。选择哪种实现方式，很大程度上取决于你面对的具体场景、对性能和内存的需求，以及你对代码可读性和简洁性的偏好。没有绝对的“最佳”方案，只有最适合你当前需求的方案。

以上就是js 如何用chunk将数组分割为多个小块的详细内容，更多请关注php中文网其它相关文章！