如何将对象属性作为函数参数传入并正确访问？

场景还原 #

我手里有一个months数组，每个元素都是月份对象，里面包含了各种属性，比如consumptionPerHour数组——要获取某一天24小时的数值，直接用months[0].consumptionPerHour[0]到months[0].consumptionPerHour[23]就能访问。

为了高效生成数据表格，我写了个tableMaker函数，原本设想是传入表名和目标数组的属性名，就能自动把对应数据渲染成表格。

遇到的问题 #

结果调用tableMaker('Consumption', consumptionPerHour)的时候，浏览器控制台直接报错：

Uncaught ReferenceError: consumptionPerHour is not defined

但奇怪的是，我在控制台里直接输入months[0].consumptionPerHour，明明能正常拿到对应的数组数据。

解决方法 #

后来经vadim提示，我把函数里原来的写法：

months[i].anArray[b]

改成了：

months[i][anArray][b]

修改之后，函数就能正常工作，不再报错了。

原因解释 #

这里的核心问题是变量和属性名的区别：

• 当我把consumptionPerHour作为参数传递时，JavaScript会试图寻找一个名为consumptionPerHour的全局/局部变量，但这个变量根本没定义过——它只是months数组元素的一个属性名称而已。
• 而使用方括号语法months[i][anArray]时，JS会把anArray参数当作字符串（也就是属性名）来处理，动态访问对象的对应属性，这样就能正确拿到我们需要的consumptionPerHour数组了。

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