JavaScript数组分页核心是用slice()按页码和每页数量截取子数组，封装为paginate函数返回数据及总页数等元信息，适用于几百条以内数据；大数据量应改用服务端分页。
JavaScript 中实现数组分页处理，核心是用 slice() 方法按页码和每页数量截取对应子数组，再结合总页数、当前页等逻辑做状态管理。不依赖后端，纯前端分页适用于数据量不大（如几百条以内）的场景。
基础分页：用 slice() 截取当前页数据
给定一个数组、当前页码（从 1 开始）、每页条数，即可计算起始索引并截取：
- 起始索引 = (currentPage - 1) * pageSize
- 结束索引 = 起始索引 + pageSize
- 使用 arr.slice(start, end) 安全截取（超出范围不会报错）
示例：
const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const currentPage = 2;
const pageSize = 3;
const start = (currentPage - 1) * pageSize; // 3
const pageData = list.slice(start, start + pageSize); // [4, 5, 6]
封装分页工具函数
把分页逻辑抽成可复用函数，返回含数据和元信息的对象：
立即学习“Java免费学习笔记（深入）”；
function paginate(arr, page = 1, size = 10) {const start = (page - 1) * size;
const data = arr.slice(start, start + size);
const total = arr.length;
const totalPages = Math.ceil(total / size);
return { data, total, totalPages, currentPage: page, hasNext: page 1 };
}
// 使用：
const result = paginate([1,2,3,4,5,6,7], 2, 3);
// → { data: [4,5,6], total: 7, totalPages: 3, ... }
配合 UI 实现简单分页控件
渲染页码按钮时，注意边界处理（如总页数少时不必显示“...”），并禁用无效按钮：
- 只显示 1–totalPages 的整数页码
- 当前页按钮高亮，上一页/下一页根据 hasPrev/hasNext 控制是否可点击
- 页码跳转输入框需校验：输入值应在 1 到 totalPages 之间，否则自动修正
例如点击“第 4 页”，只需更新 currentPage = 4，再调用 paginate() 即可获取新数据。
注意事项与优化点
前端分页本质是内存操作，要注意：
- 大数据量（如上万项）不建议全量加载后分页，会卡顿或内存溢出；应改用服务端分页（传 page & size 给接口）
- 若需搜索+分页，先 filter() 再分页，避免每次重算全部数据
- 保持 currentPage 和 pageSize 响应式（如用 React useState / Vue ref），确保 UI 同步更新
- 首次加载建议默认 page=1，size 可配置（常见为 10 / 20 / 50）
