本文介绍如何通过点击按钮实现对 json 数组中对象的顺序遍历，利用 `fetch` 加载数据、状态索引控制当前项，并支持循环切换，附完整可运行代码与关键细节说明。
在构建数据驱动的前端界面时，常需以“翻页”或“轮播”方式展示结构化数据（如用户列表）。针对 JSON 数组中按 id 顺序排列的对象，最简洁可靠的方案是：不依赖 id 字段做查找，而是维护一个递增的数组索引状态——既避免 id 不连续或缺失导致的逻辑断裂，又提升性能（无需每次遍历匹配）。
以下为推荐实现：
✅ 核心思路
- 使用 async/await 替代 .then() 链，使异步逻辑更清晰；
- 定义 currentUser 索引变量，初始为 0，指向首个元素；
- 为按钮绑定 click 事件，每次点击后 currentUser++，再用取模运算 currentUser %= data.length 实现无缝循环（到达末尾自动跳回开头）；
- 封装 showUser(user) 函数统一渲染，每次先清空容器再插入新内容，避免重复叠加。
✅ 完整可运行代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<div id="user"></div>
<button id="next" type="button">next</button>
<script>
const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const elUser = el("#user");
const elNext = el("#next");
const showUser = (user) => {
const div = elNew("div", {
className: "item-user",
textContent: `${user.first_name} ${user.last_name}`
});
elUser.innerHTML = ""; // 清空旧内容
elUser.append(div);
};
(async () => {
try {
let currentUser = 0;
const res = await fetch('data.json');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
if (data.length === 0) {
elUser.textContent = "No data available.";
return;
}
showUser(data[currentUser]); // 初始化显示第一项
elNext.addEventListener("click", () => {
currentUser = (currentUser + 1) % data.length; // 安全递增并循环
showUser(data[currentUser]);
});
} catch (err) {
console.error("Failed to load or display data:", err);
elUser.textContent = "Error loading data.";
}
})();
</script>
</body>
</html>⚠️ 注意事项
- 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 列表的顺序浏览场景。
