如何使用for循环将多个DOM元素赋值给对应多个变量

你的代码没有生效的核心原因是：varArray里存的是'varOne'这类字符串，不是对应变量的引用。循环里修改varArray[i]的值，只是在替换数组内存储的内容，既不会自动创建varOne/varTwo/varThree这几个变量，也不会给同名的已声明变量赋值，自然找不到你预期的目标变量。

• 推荐方案：用数组统一存储DOM元素
  不需要硬凑零散的独立变量，直接把获取到的DOM节点存在数组里，后续按索引取用即可，代码最简洁也最好维护：

  const idArray = ['one', 'two', 'three'];
  const elements = idArray.map(id => document.getElementById(id));
  
  // 使用示例：取id为one的元素直接拿elements[0]即可
  

• 方案2：用对象存储具名引用
  如果确实需要按自定义名称访问元素，可以把元素挂到一个专门的对象上，通过对象属性访问，不会污染作用域：

  const idArray = ['one', 'two', 'three'];
  const varNames = ['varOne', 'varTwo', 'varThree'];
  const domRefs = {};
  
  for (let i = 0; i < idArray.length; i++) {
    domRefs[varNames[i]] = document.getElementById(idArray[i]);
  }
  
  // 使用示例：取对应元素直接写domRefs.varOne
  

• 不推荐方案：挂载到全局作用域
  浏览器环境下全局变量默认挂载在window对象上，可以通过给window动态加属性生成全局变量，但这种方式会污染全局命名空间，非特殊场景不要用：

  const idArray = ['one', 'two', 'three'];
  const varNames = ['varOne', 'varTwo', 'varThree'];
  
  for (let i = 0; i < idArray.length; i++) {
    window[varNames[i]] = document.getElementById(idArray[i]);
  }
  // 执行后可以直接在全局访问varOne、varTwo、varThree变量
  

注意：绝对不要用eval实现动态变量赋值，该方法存在XSS安全隐患，还会导致代码性能下降、难以调试，完全没有使用必要。

内容的提问来源于stack exchange，提问作者Loading 8mini