JS数组分块方法及使用技巧

一分耕耘，一分收获！既然都打开这篇《JS数组分块方法详解》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

数组分块的核心思路是通过遍历原数组并以固定步长使用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 的方式，JavaScript的世界里总不乏一些更“函数式”或者更“高级”的玩法。

一个常见的替代方案是使用 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])。Lodash 的 chunk 函数非常健壮，处理各种边界情况都考虑得很周全，而且性能也经过优化。但这需要引入整个库，如果你只是为了一个 chunk 函数而引入，那可能有点大材小用。

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

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数组分块方法及使用技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！