for/in循环中object.variable与object[variable]的差异及使用问题咨询

嘿，这个问题其实是JavaScript里对象属性访问的核心知识点之一，我来给你掰扯清楚～

核心差异 #

JavaScript里访问对象属性有两种方式，它们的本质区别在于属性名的来源：

• 点表示法（.）：这里的属性名是固定的字面量标识符，你写的是什么，就会直接去对象里找同名的属性。它要求属性名必须是合法的JS标识符（不能有空格、特殊字符，也不能以数字开头），而且不能是变量。
• 方括号表示法（[]）：这种方式支持动态属性名——括号里可以放变量、表达式，JS会先解析括号内的内容，把它转换成字符串，再去对象里匹配对应的属性名。这也是它最灵活的地方。

结合你的代码来解释 #

先看第一个正常工作的代码：

let student = {name:"John", surname:"Doe", index:386754};
let text = "";
let x;
for (x in student) {
  text += student[x] + " ";
}

for...in循环会遍历student的所有可枚举属性，每次循环里的x会被赋值为属性名的字符串（第一次是"name"，第二次"surname"，第三次"index"）。student[x]会先把x的值解析成字符串，再去对象里找对应属性，自然就能拿到"John"、"Doe"、386754这些值。

再看返回undefined的代码：

let student = {name:"John", surname:"Doe", index:386754};
let text = "";
let x;
for (x in student) {
  text += student.x + " ";
}

这里的student.x用的是点表示法，x是作为字面量来处理的——JS会直接去student对象里找名为"x"的属性，但你的student根本没有这个属性，所以每次都会返回undefined，最后拼出来就是三个undefined了。

再补个直观的小例子 #

比如我们定义一个变量：

let propName = "name";

• student[propName] → 解析propName的值为"name"，等价于student["name"]，返回"John"
• student.propName → 直接找student里名为"propName"的属性，返回undefined

这样是不是就更清楚啦？

内容的提问来源于stack exchange，提问作者Igor Ušumović