如何校验输入字符串匹配JS数组名并访问对应数组指定下标元素

最优方案：使用对象映射存储数组（推荐） #

把所有要匹配的数组统一存到一个自定义对象中，既可以避免全局作用域污染，又能保证校验逻辑的安全性。

具体实现代码 #

// 1. 定义数组映射表，PHP生成数组的时候可以直接生成这个结构，不需要单独声明a-f变量
const arrMap = {
  a: [1,2,3,4,5],
  b: [1,2,3,4,5],
  c: [1,2,3,4,5],
  d: [1,2,3,4,5],
  e: [1,2,3,4,5],
  f: [1,2,3,4,5]
}

// 2. 获取输入值
const name = document.getElementById("some_element").value.trim()
const number = document.getElementById("some_other_element").value.trim()

// 3. 校验+取值逻辑
let result = null
// 先校验name是否匹配存在的数组名
if (arrMap.hasOwnProperty(name)) {
  // 把输入的number转成整数，避免字符串类型下标问题
  const index = parseInt(number, 10)
  const targetArr = arrMap[name]
  // 校验下标是否合法：是有效数字、大于等于0、小于数组长度
  if (!isNaN(index) && index >=0 && index < targetArr.length) {
    result = targetArr[index]
    // 这里拿到结果可以做后续操作
    console.log('匹配到的元素是:', result)
  } else {
    console.log('输入的下标不合法')
  }
} else {
  console.log('输入的数组名不存在')
}

适配原有代码的改造方式 #

如果你不想改动原来PHP生成单独a-f变量的逻辑，也可以直接把现有变量填入映射表：

// 你原有生成的数组
let a = [1,2,3,4,5];
let b = [1,2,3,4,5];
let c = [1,2,3,4,5];
let d = [1,2,3,4,5];
let e = [1,2,3,4,5];
let f = [1,2,3,4,5];

// 手动构建映射表即可
const arrMap = {a, b, c, d, e, f}

不推荐的方案：从全局作用域取值 #

如果你的数组是声明在全局作用域的，可以用window[name]直接取，但非常不推荐，因为可能意外拿到window对象上的其他属性，存在安全隐患和不可控风险：

// 仅作展示，不推荐使用
if (['a','b','c','d','e','f'].includes(name)) { // 先加一层白名单校验降低风险
  const targetArr = window[name]
  // 后续下标校验逻辑和上面一致
}

绝对不要使用eval方法取值，会有严重的XSS安全风险。

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