使用变量访问JavaScript键值对属性返回undefined的原因咨询

嘿，这个问题其实是JavaScript对象属性访问的经典新手坑，我刚学的时候也踩过！咱们一步步拆解来看：

首先得搞懂JavaScript里对象属性的两种访问方式有本质区别：

1. 点语法（.）的规则 #

点语法后面跟的必须是明确的属性名称标识符，它不会把后面的内容当成变量解析。比如你写animals.dynamicaccess，JS会直接去animals对象里找一个叫"dynamicaccess"的属性——但你的对象里根本没有这个属性，所以自然返回undefined。

换句话说，点语法是「硬编码」式的访问，只能写死属性名，没办法用变量动态替换。

2. 方括号语法（[]）的正确打开方式 #

当你需要用变量动态访问属性时，必须用方括号语法！方括号里的内容会被JS先解析成值，再去对象里找对应的属性。比如你的代码改成这样就正常了：

var animals = {DOGS: 10, CATS: 1, RATS: 20, COWS: 0};
var dynamicaccess = "CATS";
console.log(animals[dynamicaccess]); // 输出 1

这里JS会先读取dynamicaccess变量的值"CATS"，然后去animals里找这个属性，自然就拿到正确结果了。

额外补充个小知识点：方括号语法的灵活性还不止于此，它还支持直接写字符串（比如animals["DOGS"]）、甚至表达式（比如animals["CA" + "TS"]），而这些场景下点语法是用不了的（比如属性名带空格、以数字开头的时候，点语法完全失效）。

刚接触的时候确实会觉得「我都定义变量了，用点语法应该能识别啊」，但JS的语法规则就是这样区分两种访问场景的，记住这个区别以后就再也不会踩这个坑啦～

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