JavaScript如何将for循环的遍历值作为对象key获取对应属性？

JavaScript 中对象属性访问分为两种语法：

• 点符号语法：仅支持固定属性名，会直接将.后的标识符作为属性名的字面量处理，因此你的代码中.value会尝试查找名为value的属性，不会读取循环变量value的实际值
• 方括号语法：支持传入动态变量/表达式，引擎会先计算方括号内的内容，将结果转为字符串作为属性名查找，完全匹配你的需求

你只需将console.log(sitesList.sites.value.name);替换为以下代码即可：

console.log(sitesList.sites[value].name);

完整可运行示例 #

const sitesList = 
{"sites": {
  "miami": {
    "name": "Miami Beach"
  },
  "london": {
    "name": "London Bridge"
  }
}}

async function readPDF2(sites) {
  for (const value of sites) {
    // 方括号语法实现动态属性读取
    console.log(sitesList.sites[value].name);
  }
}

// 测试调用
readPDF2(['miami']); // 输出：Miami Beach
readPDF2(['miami', 'london']); // 依次输出：Miami Beach、London Bridge

优化建议 #

如果需要兼容传入不存在的站点key的场景，可以添加可选链操作符避免报错：

console.log(sitesList.sites[value]?.name);

当匹配不到对应属性时会返回undefined，不会中断代码运行。

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