如何用JavaScript在项目中高效实现分页并展示数据？

本文共计1151个文字，预计阅读时间需要5分钟。

分页的核心是从数组中切出当前页的数据。建议使用一个纯函数 + getPaginatedData 处理，不依赖 DOM 或框架状态。它只接收原始数据数组、当前页码 currentPage 和每页条数 pageSize，返回切分后的子数组。

常见错误是把分页逻辑和渲染混在一起，导致无法复用或测试困难。比如在 React 中直接在 useEffect 里计算切片，或在 Vue 的 computed 中硬编码 pageSize —— 这会让逻辑耦合 UI，后续改每页显示数就得翻遍模板。

• currentPage 必须从 1 开始（用户感知页码），但数组索引从 0，所以起始索引是 (currentPage - 1) * pageSize
• 结束索引用 Math.min(start + pageSize, data.length)，避免越界报错
• 不要用 splice 原地修改原数组，用 slice 保证不可变性

前端分页要不要发请求？

取决于数据量。如果总数据不到 200 条，一次性拉取后前端分页更稳：没网络抖动、无 loading 状态管理、跳页响应快。这时候 fetch 只需执行一次，后续所有翻页都是纯内存操作。

一旦总条数上万，或用户可能只看前几页，就必须后端分页 —— 否则首屏加载慢、内存占用高、手机端易卡死。此时前端要传 page 和 limit 参数给接口，且必须校验后端返回的 total 字段来算总页数，不能靠前端猜。