如何正确遍历 API 返回的数组对象并提取字段值

本文详解如何从 fetch 请求获取的 json 响应中安全提取数组数据，并使用现代 javascript（for…of 循环 + 解构赋值）逐项访问对象属性，避免因错误解构导致 `undefined` 的常见问题。

在调用 restful API（如 https://apis.ccbp.in/city-bikes）时，后端通常返回一个标准 JSON 数组（例如 [{ “city”: “Moscow”, “id”: “velobike-mosco”, “name”: “Velobike” }, …]），而非包含 Array 字段的对象。你遇到的 let { Array } = jsonData 报出 undefined，正是因为 jsonData 本身就是一个数组，并非一个具有 Array 属性的对象——这种解构语法试图从对象中读取键名为 “Array” 的属性，自然失败。

✅ 正确做法是：直接将响应数据（即 res）视为数组，然后使用迭代语法遍历：

fetch("https://apis.ccbp.in/city-bikes?bike_name=velo")   .then(response => {     if (!response.ok) {       throw new Error(`HTTP error! status: ${response.status}`);     }     return response.json();   })   .then(res => {     // ✅ res 就是数组，无需解构！     if (!Array.isArray(res)) {       console.warn("Warning: API did not return an array — check response structure");       return;     }      for (const bike of res) {       // ✅ 安全解构：只提取已知存在的字段（city, id, name）       const { city = "Unknown", id = "", name = "Unnamed" } = bike;        console.log(`Bike ID: ${id} | City: ${city} | Name: ${name}`);       // 示例输出：Bike ID: velobike-mosco | City: Moscow | Name: Velobike     }   })   .catch(error => {     console.error("Failed to fetch or parse bike data:", error);   });

? 关键注意事项：

• 不要盲目解构：let { Array } = jsonData 是典型误用。先用 console.log(jsonData) 确认响应结构（浏览器开发者工具 Network 标签页也可预览）；
• 校验数组类型：使用 Array.isArray(res) 防御性编程，避免运行时错误；
• 提供默认值：解构时使用 = “default” 语法，防止某条数据缺失字段导致 undefined 参与后续逻辑；
• 错误处理不可省略：网络失败、HTTP 错误（如 404/500）、JSON 解析失败均需 catch 捕获；
• 替代遍历方式：除 for…of 外，也可用 res.foreach() 或 res.map()，但 for…of 在需要提前退出（break）或复杂控制流时更灵活。

总结：API 返回的数据结构决定访问方式——多数列表接口直接返回数组，应直连遍历；解构是锦上添花，而非前提条件。掌握响应结构验证 + 类型判断 + 安全解构，即可稳健处理各类数组型 API 数据。