将字符串作为变量

Posted 2023-02-22

【中文标题】将字符串作为变量

【英文标题】：serve string as variable

【发布时间】：2021-10-31 01:24:48

【问题描述】：

我想使用 id 从输入元素中获取值并将值保存在变量中 但它需要是动态的

我在 html 中有 id，id 的名称与变量名称相同

因为我的常规方法是

let one = document.getElementById("one").value
let two= document.getElementById("two").value
let three= document.getElementById("three").value

console.log(one,two,three) // value1,value2,value2

但我想做动态的 我已经尝试过了，但没有成功

let one,two,three; //declared variable
let valueArray = ["one","two","three"]  // i want loop through variable so declare varibles array in string
valueArray.forEach(element =>    // loop over array
   element = document.getElementById(element)  
);

console.log(one,two,three) // undefined,undefined,undefined

所以任何想法来做这个动态

【问题讨论】：

这真的是react 的问题吗？这段代码看起来是纯 JS，如果你使用 react，你应该很少使用 DOM 选择器。

您还覆盖了element 参数，该参数超出了每个循环的范围。我不确定你的目标是什么，你能用想要的结果和你目前得到的结果来更新你的问题吗？

你没有对找到的元素做任何事情！

根据您的代码，假设其他一切正常，element.value 应该有您输入字段的值。

只要您明确声明变量one、two、three，您就不会“动态地”做任何事情。您需要使用数组或对象，以便动态追加。

【参考方案1】：

尝试以下方法：

const [ one, two, three] = ['one', 'two', 'three'].map(item => document.getElementById(item).value);

【参考方案2】：

带有 ID 的元素已经在 window 对象中，所以你需要做的就是使用 window[element]

let valueArray = ["one","two","three"];

valueArray.forEach(element =>    // loop over array
   console.log(window[element]);
);

<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="three">THREE</div>

【参考方案3】：

将变量放入对象中，然后更新值：

    var values = 
    let valueArray = ["one","two","three"]
    valueArray.forEach(element =>    // loop over array
       values[element] = document.getElementById(element)  
    );
    
    console.log(values)

【参考方案4】：

可以写入窗口对象，将值保存为全局变量：

const valueArray = ["one","two","three"];

for (const value of idArray) 
  window[value] = getElementById(value).value;

像这样设置变量比常规赋值更难阅读，因此请注意，这不是最佳实践。