JavaScript如何将数组中的字符串转换为独立变量

你写的代码有两个核心问题：

• 语法错误：let array[0] = document.getElementById('id') 属于非法写法，let 只能用来声明变量，不能给数组的某个索引位置单独加声明关键字。
• 逻辑偏差：数组里存的是你想要的变量名字符串，直接给数组索引赋值只会修改数组本身的内容，不会自动生成对应名字的独立变量。

方案1：对象键值对存储（优先推荐） #

这是最稳妥的通用方案，不会污染作用域，后续维护、取值都很方便：

// 存你需要的变量名列表
const varNameList = ['varOne', 'varTwo', 'varThree']
// 用来存DOM引用的容器
const domRefs = {}

varNameList.forEach((varName, index) => {
  // 替换成你对应的DOM id即可，如果id和变量名一致直接传varName就行
  domRefs[varName] = document.getElementById(/* 对应DOM元素的id */)
})

// 取值直接访问对象属性
console.log(domRefs.varOne) // 拿到第一个DOM元素
console.log(domRefs.varTwo) // 拿到第二个DOM元素

如果DOM的id和数组里的变量名不是一一对应，你可以单独维护一个id列表，按索引匹配赋值：

const varNameList = ['varOne', 'varTwo', 'varThree']
const domIdList = ['header', 'content', 'footer']
const domRefs = {}
varNameList.forEach((varName, index) => {
  domRefs[varName] = document.getElementById(domIdList[index])
})

方案2：挂载到全局作用域（非必要不推荐） #

浏览器环境里所有全局变量都是window对象的属性，你可以直接给window挂载属性，生成全局可访问的独立变量：

const varNameList = ['varOne', 'varTwo', 'varThree']
varNameList.forEach(varName => {
  window[varName] = document.getElementById(/* 对应DOM元素的id */)
})

// 可以直接在任何位置访问这几个变量
console.log(varOne)

注意：这种写法会污染全局命名空间，很容易覆盖已有的全局变量，引发很难排查的bug，只适合临时测试用，正式项目不要这么写。

方案3：变量数量固定时用解构赋值 #

如果你确定变量的数量、顺序是固定的，不需要动态生成，直接用数组解构的写法最简洁直观：

// 按数组顺序，直接把DOM赋值给三个独立变量
const [varOne, varTwo, varThree] = [
  document.getElementById('header'),
  document.getElementById('content'),
  document.getElementById('footer')
]

// 直接访问变量即可
console.log(varOne, varTwo, varThree)

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