JavaScript遍历对象数组时person.name有效但personData.name返回undefined原因求解

你遇到的差异本质是两次访问的目标对象完全不同，和${}模板字符串语法本身没有关系：

• 首先先明确${}的作用：这是ES6标准推出的模板字符串插值语法，仅在反引号``包裹的字符串中生效，作用是把花括号内的表达式计算结果插入到字符串的对应位置。
• 循环中可以正常取值的原因：for(let person of personData)是数组的迭代遍历语法，每一轮循环都会把personData数组中对应的元素赋值给临时变量person。你的personData数组中存储的每个元素都是带有name、age属性的对象，所以person.name自然可以读取到对应对象的属性值。
• 直接打印返回undefined的原因：personData本身是数组类型，你没有给这个数组对象定义过name属性，JS中访问对象不存在的属性时默认返回undefined，和是否使用模板字符串无关。如果你要直接读取数组内对象的属性，需要先指定数组下标定位到具体元素，比如personData[0].name就能拿到第一个元素的name值Dylan。

你可以简单理解为循环等价于依次执行了以下逻辑：

// 依次取出数组的每个元素赋值给person
let person = personData[0]
console.log(person.name) // Dylan
person = personData[1]
console.log(person.name) // Hannah
// 以此类推遍历完所有元素

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