如何在 JavaScript 中正确访问 API 返回的数组型响应数据

聖光之護 2026-01-03 00:00:00 次阅读

当 api 返回的数据是一个数组（如 `response[0]`），而其中包含 `setup` 和 `punchline` 等属性时，需使用方括号语法访问索引项，再通过点语法读取嵌套属性，避免因数字键名导致的语法错误。

在调用类似 Dad Jokes API 这类接口时，返回的 JSON 响应通常是一个包含单个对象的数组（例如 [{ "id": "...", "setup": "...", "punchline": "..." }]），而非直接返回一个普通对象。因此，response 变量实际是数组类型，其第一个元素（即 response[0]）才是你真正需要操作的笑话对象。

你无法写 response.0.setup，是因为 JavaScript 中属性名若以数字开头（如 "0"），不支持点号（.）访问——这是语法错误。此时必须使用方括号表示法（bracket notation）：response[0] 是合法且标准的写法，等价于 response['0']（但推荐用数字索引形式）。

✅ 正确访问方式如下：

fetch('https://www./link/4dd2e52472d976079f9ea2433fa55adf/random/joke', options)
  .then(response => response.json())
  .then(data => {
    console.log(data); // 查看真实结构：通常是 { body: [{ setup: "...", punchline: "..." }] }

    // 注意：根据截图和常见响应结构，实际数据可能嵌套在 data.body[0]
    const joke = data.body?.[0]; // 使用可选链确保安全访问
    if (joke && joke.setup && joke.punchline) {
      document.getElementById("joke").innerText = `${joke.setup}\n\n${joke.punchline}`;
    } else {
      document.getElementById("joke").innerText = "暂无可用笑话";
    }
  })
  .catch(err => {
    console.error("API 请求失败：", err);
    document.getElementById("joke").innerText = "加载失败，请重试";
  });