如何高效遍历JavaScript数组并实现分页转换？

你手头有一个包含30条数据的allRows数组，想要把它转换成每页10条的二维分页数组rowsPaginated，普通for循环虽然能实现，但确实不够优雅。下面几种方案都是更优的选择，兼顾可读性和性能：

方案1：使用Array.prototype.reduce()（简洁的函数式写法） #

这个方法通过一次遍历就能完成分组，非常符合现代JavaScript的函数式编程风格，代码也很紧凑：

const pageSize = 10;
const rowsPaginated = allRows.reduce((acc, curr, index) => {
  // 计算当前元素所属的页码索引
  const pageIndex = Math.floor(index / pageSize);
  // 如果该页码的数组还未初始化，先创建空数组
  if (!acc[pageIndex]) {
    acc[pageIndex] = [];
  }
  // 将当前元素推入对应页码的数组
  acc[pageIndex].push(curr);
  return acc;
}, []);

这种写法不需要额外的循环控制变量，逻辑完全封装在reduce的回调里，代码简洁且无副作用。

方案2：使用Array.prototype.slice()（直观的分段写法） #

如果你觉得reduce的逻辑有点抽象，用slice来分段的写法会更直观，可读性拉满，新手也能一眼看懂：

const pageSize = 10;
const rowsPaginated = [];
// 每次跳过pageSize个元素，直接截取当前页的片段
for (let i = 0; i < allRows.length; i += pageSize) {
  rowsPaginated.push(allRows.slice(i, i + pageSize));
}

slice方法不会修改原数组，直接返回当前页的子数组，循环步长设为pageSize，一次循环就能拿到整页数据，性能也很出色。

方案3：ES6生成器函数（按需分页，适配大数据量） #

如果你的数组数据量极大，一次性生成所有分页数组会占用过多内存，那么生成器函数是更好的选择——它可以按需生成每一页的数据，用多少生成多少：

function* paginateArray(arr, pageSize) {
  for (let i = 0; i < arr.length; i += pageSize) {
    yield arr.slice(i, i + pageSize);
  }
}

// 使用示例：
const pageGenerator = paginateArray(allRows, 10);
// 获取第一页
const page1 = pageGenerator.next().value;
// 获取第二页
const page2 = pageGenerator.next().value;

这种方式能有效减少内存占用，非常适合处理十万级甚至百万级的大型数组。

为什么这些方案比普通for循环更好？ #

• 代码更简洁优雅，无需手动管理页内数组的创建和元素追加逻辑
• 可读性更强，语义化程度更高（比如reduce的累加器、slice的分段逻辑）
• 部分方案（如生成器）能适配特殊场景，优化性能和内存使用

内容的提问来源于stack exchange，提问作者Shah Alom