通过索引访问对象时为何返回undefined？

首先，你的操作确实存在判断偏差——data[0]返回undefined的核心原因，几乎都是你对后端返回的数据结构判断错误导致的。咱们一步步拆解：

可能的原因及对应解决方法 #

• 后端返回的不是数组，而是单个对象
  很多时候后端接口会直接返回一个对象（比如{ "time": "2024-05-20", "value": 150 }），而不是数组。这时候用数组索引[0]去访问自然会得到undefined。
  解决办法：直接通过对象属性访问，比如data.time、data.value。

• 后端返回的是包含数组的嵌套对象
  有些接口会把数组包裹在对象里返回，比如：

  {
    "code": 200,
    "msg": "success",
    "dataList": [{"time": "09:00"}, {"time": "10:00"}]
  }
  

  这种情况下你得先拿到嵌套的数组，再用索引访问，也就是data.dataList[0]，而不是直接data[0]。

• 后端返回的数组是空的
  如果console.log(data)显示的是[]（空数组），那data[0]当然是undefined。这时候要检查后端接口的逻辑，确认它是否正确生成并返回了数据。

关键调试步骤 #

1. 仔细查看console.log(data)的输出，明确返回数据的真实结构：
   • 是数组？还是对象？
   • 如果是对象，里面有没有包含数组的属性？
2. 根据真实结构调整访问方式：
   • 数组用索引[index]，对象用.或[]访问属性。

举个例子，如果你的console.log(data)输出是：

{
  "result": [
    {"hour": 9, "count": 10},
    {"hour": 10, "count": 20}
  ]
}

那你应该用data.result[0].hour来访问第一个元素的hour值，而不是data[0]。

内容的提问来源于stack exchange，提问作者pee2pee