本文介绍如何通过点击按钮实现对 json 数组中对象的顺序遍历，利用 `fetch` 加载数据、状态索引控制当前项，并支持循环切换，附完整可运行代码与关键细节说明。
在构建数据驱动的前端界面时，常需以“翻页”或“轮播”方式展示结构化数据（如用户列表）。针对 JSON 数组中按 id 顺序排列的对象，最简洁可靠的方案是：不依赖 id 字段做查找，而是维护一个递增的数组索引状态——既避免 id 不连续或缺失导致的逻辑断裂，又提升性能（无需每次遍历匹配）。
以下为推荐实现：
✅ 核心思路
- 使用 async/await 替代 .then() 链，使异步逻辑更清晰；
- 定义 currentUser 索引变量，初始为 0，指向首个元素；
- 为按钮绑定 click 事件，每次点击后 currentUser++，再用取模运算 currentUser %= data.length 实现无缝循环（到达末尾自动跳回开头）；
- 封装 showUser(user) 函数统一渲染，每次先清空容器再插入新内容，避免重复叠加。
✅ 完整可运行代码
⚠️ 注意事项
- ID 不应作为遍历依据：原始代码中 if (data[i].id === 0) 是低效且脆弱的（如 id 缺失、乱序、非数字时会失效），而基于数组索引访问是稳定、O(1) 的。
- 错误处理不可省略：fetch 可能因网络、CORS 或文件路径失败；json() 解析也可能出错；务必用 try/catch 包裹并提供降级提示。
- 边界保护：% data.length 确保索引始终合法，但需前置校验 data.length > 0，防止空数组导致 NaN 或崩溃。
- 扩展建议：如需“上一页”功能，可添加 prev 按钮，配合 (currentUser - 1 + data.length) % data.length 实现反向循环。
该方案轻量、健壮、符合现代 JavaScript 最佳实践，适用于任何静态 JSON 列表的顺序浏览场景。
