JavaScript如何动态将input元素ID对应的value赋值给同名变量

问题原因 #

你之前的写法失效的核心原因：forEach循环中的element只是数组字符串值的临时副本，你提前声明的one/two/three变量和数组里的字符串值仅字面量相同、没有直接关联，给临时变量element赋值完全不会修改到你提前声明的三个变量，所以最终打印结果全为undefined。

可行方案 #

方案1：对象存储+解构赋值（最推荐，无副作用） #

这是最稳妥的实现方式，不会污染全局作用域，也能直接得到和ID同名的变量：

// 定义需要取值的ID列表
const ids = ["one", "two", "three"];
// 批量获取对应input的value，生成key和ID完全一致的对象
const valueObj = Object.fromEntries(
  ids.map(id => [id, document.getElementById(id).value])
);
// 解构得到和ID同名的变量
const { one, two, three } = valueObj;

console.log(one, two, three); // 输出对应input的value值

方案2：全局挂载（不推荐，仅适合小项目临时使用） #

如果不需要考虑全局作用域污染问题，浏览器环境下可以直接把变量挂载到window对象上，也能直接使用同名变量：

const ids = ["one", "two", "three"];
ids.forEach(id => {
  window[id] = document.getElementById(id).value;
});

console.log(one, two, three); // 直接调用全局同名变量

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