如何在JavaScript中通过变量名字符串获取对应变量的content属性？

最简便且易维护的方式是用映射对象统一管理所有选项对应的对象，彻底摆脱大量if/else的冗余代码，还比直接访问全局变量更安全。

具体实现： #

1. 把所有相关的选项对象整合到一个映射表里，键名和select的选项值完全对应：

// 直接定义映射表
const optionMap = {
  optionA: { content: "a" },
  optionB: { content: "b" }
};

// 如果已经存在之前的optionA、optionB变量，也可以直接引用
// var optionA = { content:"a" };
// var optionB = { content:"b" };
// const optionMap = { optionA, optionB };

2. 通过select的value直接从映射表中取值：

// 获取页面上的select元素
const select = document.querySelector('select');
// 用select的value作为键名，直接拿到对应对象的content属性
const output = optionMap[select.value].content;

为什么不推荐直接用全局变量？ #

如果你的optionA、optionB是全局变量（浏览器环境下挂载在window上），也能通过window[select.value].content获取，但这种方式隐患不少：

• 容易和其他脚本的变量冲突，造成全局污染
• 维护时很难快速定位所有相关选项
• 严格模式下可能无法正常访问

扩展适配 #

后续新增选项时，只需要在optionMap里添加对应的键值对就行，完全不用修改逻辑代码，特别适合你这种大量同类场景的需求。

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