JS遍历JSON数组对象的几种方法

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JS按钮遍历JSON数组对象方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

本文介绍如何通过点击按钮依次展示 JSON 数组中每个对象的数据，利用索引控制、事件监听与循环翻页逻辑实现平滑切换。

在前端开发中，常需将结构化 JSON 数据以交互方式呈现给用户。例如，从一个包含多个用户信息的数组中，按顺序逐条显示——这正是本教程要解决的核心需求：点击“next”按钮，自动切换并渲染下一个对象的内容。

实现该功能的关键在于三点：

1. 数据预加载与状态管理：一次性获取全部 JSON 数据，并用变量（如 currentUser）记录当前展示项的索引；
2. 事件驱动更新：为按钮绑定 click 事件，每次触发时递增索引，并通过取模运算（% data.length）实现循环切换；
3. 安全高效渲染：每次切换前清空旧内容，再插入新 DOM 节点，避免重复叠加或内存泄漏。

以下是完整、可直接运行的实现代码（已优化可读性与健壮性）：

<div id="user"></div>
<button id="next" type="button">→ Next</button>

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.replaceChildren(div)）
  elUser.append(div);
};

(async () => {
  try {
    let currentIndex = 0;
    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("Invalid JSON: expected a non-empty array");
    }

    showUser(data[currentIndex]); // 初始化显示首项

    elNext.addEventListener("click", () => {
      currentIndex = (currentIndex + 1) % data.length; // 自动循环：0→1→2→0...
      showUser(data[currentIndex]);
    });
  } catch (err) {
    console.error("Failed to load or display user data:", err);
    elUser.textContent = "Error loading data.";
  }
})();

✅ 注意事项与最佳实践：

• 使用 async/await 替代 .then() 链，提升代码可读性与错误处理能力；
• 添加 HTTP 状态校验（res.ok）和 JSON 结构校验，增强鲁棒性；
• textContent 替代字符串拼接 innerHTML 可防止 XSS（尤其当数据含用户输入时）；
• 若需支持“上一页”，可扩展为双向导航（维护 currentIndex 并添加 prev 按钮）；
• 如数据量极大，建议配合虚拟滚动或分页加载，避免初始渲染性能瓶颈。

该方案简洁、可扩展，适用于产品级单页应用中的数据轮播、表单向导、测试题切换等典型场景。

理论要掌握，实操不能落！以上关于《JS遍历JSON数组对象的几种方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！