本文介绍如何通过点击按钮依次展示 json 数组中的对象数据，利用 `async/await` 获取数据、状态索引控制与模运算实现循环翻页，并确保 dom 渲染安全、代码简洁可维护。
要实现“点击按钮查看下一条 JSON 数据”的交互效果，核心在于：状态管理（当前索引）+ 数据获取 + 动态渲染 + 边界处理。以下是一个完整、健壮且现代的实现方案。
✅ 推荐实现（基于 async/await 与事件委托）
首先，HTML 结构保持简洁清晰：
JavaScript 部分采用模块化写法，兼顾可读性与健壮性：
// 工具函数：快捷选择元素 & 创建带属性的元素
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 || ''}`.trim()
});
elUser.innerHTML = ""; // 安全清空（避免 innerHTML 拼接 XSS 风险）
elUser.append(div);
};
// 主逻辑：异步加载 → 初始化 → 绑定点击事件
(async () => {
try {
const res = await fetch('data.json');
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
const data = await res.json();
if (!Array.isArray(data) || data.length === 0) {
throw new Error("JSON 数据格式错误：期望非空数组");
}
let currentIndex = 0;
showUser(data[currentIndex]); // 初始显示第 0 项
elNext.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % data.length; // 自动循环：0→1→2→0→...
showUser(data[currentIndex]);
});
} catch (err) {
console.error("数据加载失败：", err);
elUser.innerHTML = `⚠️ 加载失败，请检查 network 或 data.json 路径`;
}
})();? 关键设计说明
- % data.length 实现无缝循环：当 currentIndex 达到末尾时自动归零，无需手动判断 if (currentIndex >= data.length) currentIndex = 0;。
- textContent 替代字符串拼接：防止 XSS（尤其当数据含 HTML 标签时），同时自动处理 undefined/null 字段（如示例中第 3 项无 first_name）。
- 错误防御增强：检查 HTTP 状态、JSON 结构、数组长度，提升用户体验与调试效率。
- innerHTML = "" + append()：比 innerHTML += ... 更安全高效，避免重复解析与潜在注入。
? 扩展建议（可选）
- 添加「上一位」按钮？只需复制逻辑并改用 currentIndex = (currentIndex - 1 + data.length) % data.length（负数取模需补偿）。
- 显示当前序号（如 “第 1 / 3 位”）？在 showUser() 中同步更新一个 元素。
- 支持键盘导航（← → 方向键）？监听 document.addEventListener('keydown', ...) 并过滤 event.key。
该方案轻量、无依赖、符合现代 Web 开发最佳实践，适用于静态 JSON 数据轮播场景。
立即学习“Java免费学习笔记（深入）”；
