JavaScript中如何通过字符串匹配获取对应名称的预声明数组

问题描述 #

练习HTML下拉框交互功能时，遇到字符串值无法匹配同名预声明数组的问题：

• 已验证可用的方案需要将所有数组存入普通对象，通过键名匹配取值，希望避开这种数组包裹在对象内的写法
• 直接声明独立命名数组后，获取下拉框返回的同名字符串（如选中值为"One"，对应已声明的One数组）时，脚本仅返回字符串本身，无法关联到对应数组；尝试移除String()转换、用Array.isArray()检测均无效果。

问题复现代码：

/* 可正常返回数组，但需要将数组存入对象通过键匹配 */
const obj = { att: [1, 1, 1, 1], btt: [2, 2, 2, 2], ctt: [3, 3, 3, 3], dtt: [4, 4, 4, 4] };
function getOption() {
  let choice = document.getElementById("mySelect").value;
  function pick(name) {
    return obj[String(name)];
  }
  document.getElementById("demo").innerHTML = pick(choice);
// 下拉选"att"时，正常输出"[1,1,1,1]"
}

/* 直接声明独立数组，拿到同名字符串无法匹配到数组 */
const One = ['a','a'];
const Two = ['b','b'];
function getSecondOption() {
  let choice = document.getElementById("mySelectZwei").value;
  function pick(name) {
    return String(name);
  }
  document.getElementById("demoZwei").innerHTML = pick(choice);
// 下拉选"One"时，仅输出字符串"One"
}

核心原因 #

JavaScript中独立声明的常量、变量不会自动和同内容的字符串建立绑定关系，下拉框返回的value本质是字符串类型，直接返回字符串自然无法获取到同名变量存储的数组。
你认为"需要把数组包裹在对象里很冗余"是认知误区，这类键值映射的写法本身就是JS处理动态值匹配的标准方案，不存在设计问题。

可行解决方法 #

方法1：通过全局对象取值（仅适用于全局声明的数组） #

浏览器环境下，全局作用域声明的const/var变量会挂载到window全局对象上，可以直接通过字符串键名取值：

const One = ['a','a'];
const Two = ['b','b'];
function getSecondOption() {
  let choice = document.getElementById("mySelectZwei").value;
  const targetArr = window[choice];
  // 加类型判断避免取值异常
  document.getElementById("demoZwei").innerHTML = Array.isArray(targetArr) ? targetArr : '';
}

注意：该方法仅对全局作用域声明的变量有效，块级/函数作用域内声明的变量不会挂载到window上，方法会失效；且全局变量取值容易引发变量污染、取值异常问题，不推荐在生产环境使用。

方法2：使用Map结构维护映射（推荐） #

如果觉得普通对象包裹数组语义不清晰，可以使用ES6标准中专门用于存储键值对的Map结构，逻辑和对象映射一致，但语义更贴合"匹配取值"的场景：

// 直接初始化字符串和数组的映射关系
const arrMap = new Map([
  ['One', ['a','a']],
  ['Two', ['b','b']]
]);
function getSecondOption() {
  let choice = document.getElementById("mySelectZwei").value;
  const targetArr = arrMap.get(choice);
  document.getElementById("demoZwei").innerHTML = Array.isArray(targetArr) ? targetArr : '';
}

禁止使用eval()类方法将字符串直接转为变量执行，这类写法存在严重的XSS安全隐患，且会导致代码难以调试、维护性极差。

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