JavaScript数组遍历本身不直接实现翻页累加，需维护累积数组（如allItems）并用展开运算符或push追加每页数据，配合页码/偏移量/游标控制请求，异步时防乱序，渲染始终基于全量累积数组。
JavaScript 数组遍历本身不直接实现“翻页数据累加加载”，但可以通过结合分页逻辑、状态管理与数组操作（如 concat()、push() 或展开运算符）来实现“每次加载一页数据，追加到已有列表中”的效果。核心在于：**维护一个累积的数组，每次新页数据到来后合并进去，而非覆盖。**
用一个累积数组保存所有已加载的数据
定义一个初始为空的数组（例如 allItems = []），后续每页返回的新数据都追加进去，而不是只渲染当前页。
- 适合场景：无限滚动、点击“加载更多”、分页按钮切换但需保留历史数据
- 避免错误做法：每次请求后直接赋值
list = newData—— 这会丢弃之前加载的内容 - 推荐写法：
allItems = [...allItems, ...newData]或allItems.push(...newData)
配合分页参数控制请求（page / offset / cursor）
前端需主动管理当前页码或起始位置，确保每次请求的是下一页，不是重复拉取第一页。
- 使用数字页码：维护
currentPage = 1，点击“下一页”时currentPage++，请求时传{ page: currentPage } - 使用偏移量：如
offset = 0，每次加载后offset += limit，请求{ offset, limit: 20 } - 使用游标（推荐用于大数据）：后端返回
next_cursor，前端下次请求带上它，不依赖页码计算
在异步加载后安全更新累积数组
注意异步时序问题：避免并发请求导致数据错乱（如第3页先返回、第2页后返回，造成顺序错乱）。
立即学习“Java免费学习笔记（深入）”；
- 简单方案：禁用“加载更多”按钮直到请求完成（
loading = true） - 进阶方案：记录期望加载的页码或游标，丢弃过期响应（例如当前已到 page=5，page=3 的响应就忽略）
- 示例片段：
let allItems = []; let currentPage = 1; let loading = false; async function loadNextPage() { if (loading) return; loading = true; try { const res = await fetch(`/api/items?page=${currentPage}`); const newData = await res.json(); // 确保是期望的页码才合并（防乱序） if (currentPage === expectedPage) { allItems = [...allItems, ...newData]; renderList(allItems); // 更新视图 } currentPage++; } finally { loading = false; } }
渲染时始终基于累积数组，而非当前页数据
DOM 渲染逻辑应完全依赖 allItems，而不是“当前页数据”。这样用户滚动或翻页时，内容自然延续。
- 不要写：
list.forEach(renderItem)其中list是刚返回的newData - 应该写：
allItems.forEach(renderItem)或用框架的响应式更新（如 Vue 的v-for绑定allItems） - 如需显示“当前页”，可用
allItems.slice((currentPage-1)*limit, currentPage*limit)截取，但源数据仍是全量
