从深度嵌套对象取值时遭遇undefined错误的问题排查

你的问题核心是对象键名包含点（.）时，错误使用了.访问符取值，导致找不到对应属性返回undefined。另外可以优化数组遍历的写法让代码更简洁。

问题原因 #

你代码里的userCreds.user.givenName，JavaScript会把它解析为：先找userCreds下的user属性，再找user下的givenName属性。但实际你的键名是"user.givenName"这个完整字符串，所以用.访问符根本找不到这个键，自然返回undefined。

解决方案 #

1. 带特殊字符键名的正确取值方式
   当键名包含点、空格等特殊字符时，必须使用方括号[]语法取值，把完整键名用引号包裹：

   // 正确写法
   console.log(userCreds["user.givenName"].value);
   

   如果要取user.bio的值，同样用userCreds["user.bio"].value。

2. 优化数组遍历代码
   用for...of循环替代传统的for循环，代码更简洁易读：

   for (const item of data2) {
     const userName = item.name;
     console.log(userName);
   
     const userCreds = item.users_cred;
     // 正确取值
     console.log(userCreds["user.givenName"].value);
     // 可选：判断user.bio是否存在再取值，避免报错
     if (userCreds["user.bio"]) {
       console.log(userCreds["user.bio"].value);
     }
   }
   

完整修改后的代码 #

var data1 = {
  "name": "Jane Doe",
  "users_cred": {
    "user.givenName": {
      "value": "Janette"
    },
    "user.bio": {
      "value": "123"
    }
  }
};

var data2 = [{
    "name": "Jane Doe",
    "users_cred": {
      "user.givenName": {
        "value": "Janette"
      },
      "user.bio": {
        "value": "123"
      }
    }
  },
  {
    "name": "John Citizen",
    "users_cred": {
      "user.givenName": {
        "value": "Jonathan"
      }
    }
  }
];

// 遍历data2的正确写法
for (const item of data2) {
  console.log(item.name);
  const userCreds = item.users_cred;
  // 获取user.givenName的值
  console.log(userCreds["user.givenName"].value);
  // 处理可能不存在的user.bio
  if ("user.bio" in userCreds) {
    console.log(userCreds["user.bio"].value);
  }
}

补充说明 #

• 普通不带特殊字符的键名，.和[]语法都可以用（比如item.name等价于item["name"]）。
• 如果键名是变量，也必须用[]语法，比如const key = "user.givenName"; console.log(userCreds[key])。

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