JavaScript for...in遍历对象时通过遍历键名获取属性值返回undefined问题

你碰到的是JavaScript对象属性访问的语法规则边界：

• 点语法（.）后面必须跟字面量格式的固定属性名，JS 引擎不会把点后面的内容当变量解析。也就是说写data.x时，引擎会直接去找data对象上有没有叫"x"的属性，完全不会去读取循环变量x里存的"first"、"second"字符串去匹配对应属性，所以才会一直返回undefined。
• 方括号语法（[]）支持传入任意能求值为字符串的表达式，不管是写死的属性名字符串，还是存着属性名的变量，都能被正常解析取值。

把循环里的data.x换成方括号写法data[x]，就能正常通过遍历拿到的键名变量取值了。
修正后的代码片段：

for (let x in data) {
    console.log(x); // 按顺序输出 "first"、"second"
    console.log(data[x]); // 正常输出对应键名下的数组值
    console.log(data.first); // 和原有写法效果一致，可正常取值
}

• data["first"] 和 data.first 的取值逻辑完全等价，只是写法不同
• 方括号语法可以支持带特殊字符的属性名（比如带空格、连字符、数字开头的键名），点语法无法处理这类场景
• 你原代码里循环的变量x没有显式声明，会意外挂载到全局作用域，建议循环时用let x in data做变量声明，避免污染全局环境

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