JavaScript拼接变量与字符串作对象属性名返回undefined问题

对象的点访问语法不会解析变量名，你写playerData[i].resourceName时，JS会直接查找playerData[i]下键名**恰好是"resourceName"**的属性，不会读取resourceName变量里存储的拼接结果（比如"FoodAmount"），而你的playerData里根本没有叫resourceName的键，自然返回undefined。

动态拼接得到的属性名，必须用方括号语法访问，JS会先计算方括号内的变量/表达式结果，再用这个结果匹配对象的对应键。
修正后的完整代码如下：

var resources = [
  "Food",
  "Wood",
  "Stone",
  "Coal",
  "Copper",
  "Silver",
  "Gold",
  "Diamonds"
];

var playerData = [
  {"foodName":"Food", "FoodAmount":"100"},
  {"woodName":"Wood", "WoodAmount":"0"},
  {"stoneName":"Stone", "StoneAmount":"0"},
  {"coalName":"Coal", "CoalAmount":"0"},
  {"copperName":"Copper", "CopperAmount":"0"},
  {"silverName":"Silver", "SilverAmount":"0"},
  {"goldName":"Gold", "GoldAmount":"0"},
  {"diamondsName":"Diamonds", "DiamondsAmount":"0"},
]

function updateResources() {
    for (var i = 0; i < playerData.length; i++) {
        const resourceName = resources[i] + "Amount";
        // 方括号传入变量，访问动态属性
        console.log(playerData[i][resourceName]);
        document.getElementById(resources[i]).innerHTML = playerData[i][resourceName];
    }
}

• 点语法：仅适合访问固定、提前已知键名的属性，写法更简洁，比如直接写playerData[0].FoodAmount就能拿到第一个资源的数量
• 方括号语法：支持动态键名，括号内可以放变量、任意表达式，JS会先算出括号内的最终字符串值，再查找对应属性，是访问动态属性的唯一方式

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