使用object.key返回undefined，object[key]正常？二者差异解析

1. 属性名的解析逻辑完全不同 #

• . 访问符：后面的内容会被当作固定的字面量属性名，且必须是合法的JS标识符（不能含空格、特殊字符，不能是关键字，开头只能是字母、下划线或$）。比如写object.key时，JS会直接查找对象里名为"key"的属性，和你有没有同名变量无关。
• [] 访问符：里面的内容是表达式，JS会先计算这个表达式的结果，再用结果作为属性名去查找。比如object[key]，会先读取变量key的实际值，再用这个值匹配对象属性。这就是你遇到问题的原因——你的对象属性名是变量key的值，不是字面量"key"，所以.访问找不到，返回undefined，而[]能正确匹配。

2. 适用场景区分 #

• 用.：属性名固定、明确且是合法标识符时，写法更简洁直观，比如user.name、product.price。
• 用[]：
  • 属性名是动态生成的（比如循环中的索引、用户输入的字符串）
  • 属性名包含空格、特殊字符（比如obj["user full name"]、obj["#id"]）
  • 属性名是JS关键字（比如obj["class"]，class是关键字，不能用.访问）

示例代码 #

const propName = "email";
const user = { email: "test@example.com" };

console.log(user.propName); // undefined，查找的是属性"propName"
console.log(user[propName]); // "test@example.com"，查找的是变量propName的值"email"

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