本文详解如何从 fetch 请求获取的 json 响应中安全提取数组数据，并使用现代 javascript（for...of、解构赋值）高效遍历每个对象，避免因错误解构导致 `undefined` 的常见问题。
在调用 RESTful API（如 https://apis.ccbp.in/city-bikes）时，后端通常返回一个标准 JSON 数组，例如：
[
{ "city": "Moscow", "id": "velobike-mosco", "name": "Velobike" },
{ "city": "Berlin", "id": "nextbike-berlin", "name": "Nextbike" }
]但许多开发者误以为响应体中一定存在名为 Array 的属性，从而写出如下错误代码：
.then(function(jsonData) {
let { Array } = jsonData; // ❌ 错误：JSON 响应是数组本身，不是含 Array 字段的对象
console.log(Array); // 输出 undefined
});实际上，response.json() 解析后的 jsonData 就是数组（Array.isArray(jsonData) === true），而非一个包含 Array 键的对象。因此，不应使用对象解构 { Array }，而应直接将 jsonData 视为可迭代数组。
✅ 正确做法是：直接对 jsonData 使用 for...of 循环，并结合解构赋值提取所需字段：
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(data => {
// ✅ data 就是数组，可直接遍历
for (const bike of data) {
const { city, id, name } = bike; // 安全解构，自动跳过缺失字段
console.log(`城市: ${city}, ID: ${id}, 名称: ${name}`);
}
})
.catch(error => {
console.error("请求失败:", error.message);
});? 进阶建议：
- 若需兼容旧环境，可用传统 for (let i = 0; i
- 如需生成新数组（如仅提取所有城市名），推荐使用 data.map(({ city }) => city)；
- 始终检查 data 是否为数组且非空：if (Array.isArray(data) && data.length > 0) { ... }；
- 避免在 .then() 中忽略 response.ok，防止 4xx/5xx 状态码被静默处理。
总结：API 返回的 JSON 数组本身就是顶层值，无需解构“包装属性”。理解响应结构、善用 for...of 与解构、辅以错误处理，即可稳健、清晰地完成数据提取与遍历任务。
