为何使用collectionData.array[i]访问JavaScript对象属性会报错？

嘿，这个报错的原因很明确——你用错了对象属性的访问方式！

核心问题点 #

你写的collectionData.array[i]，JavaScript会把array当成collectionData的一个属性来解析，但你的collectionData对象里根本没有名为array的属性啊！所以collectionData.array会返回undefined，再去读取undefined[i]自然就会抛出类似Cannot read properties of undefined (reading 'i')的错误。

正确的做法：用方括号语法动态访问属性 #

JavaScript里访问对象属性有两种方式：

• 点语法：比如collectionData.customerName，这种方式只能用固定的、明确写出来的属性名，适合你提前知道属性名的场景。
• 方括号语法：比如collectionData[array[i]]，这种方式可以接受变量、表达式作为属性名，完美适配你这种通过数组动态获取字段名的需求。

修正后的代码 #

const collectionData = {'customerName':'Ashish','phone':'1234567'};
const array = ['customerName','phone'];

for (let i = 0; i < array.length; i++) { 
  console.log(collectionData[array[i]]); 
}

运行这段代码就能正常输出Ashish和1234567啦！另外补充一句：如果属性名包含特殊字符（比如空格、数字开头），或者需要动态计算属性名时，都必须使用方括号语法，点语法是处理不了这些情况的。

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