动态选择变量[重复]答案

【问题标题】：Dynamically Select Variable [duplicate]动态选择变量[重复]
【发布时间】：2016-07-01 20:51:40
【问题描述】：

我有 2 个这样的变量

var variable_1 = "foo";
var variable_2 = "bar";

我使用一个函数来获取复选框输入的值，对于每个选中的复选框，我想加载取决于复选框值的特定变量。

$("input:checked").each(function() {
    $(div).append('variable_'+$(this).val());
}

所以我将文本“variable_”与每个复选框的值连接起来。

谢谢！

【问题讨论】：

如果变量是全局的，使用window['variable_' + $(this).val()]
你最好使用对象来存储值var values = {variable_1='foo', ...}并通过名称访问它的属性$(div).append(values['variable_' + $(this).val()])
您可以使用eval 动态获取任何变量的值。喜欢$(div).append(eval("variable_" + $(this).val()))

标签： javascript jquery variables

【解决方案1】：

使用属性创建对象并通过obj['prop'] 表示法访问该属性，请参见下面的代码：

var myObj = {'variable_1': 'foo', 'variable_2': 'bar'};
 $("input:checked").each(function() {
    var dynamicVariableName = 'variable_' + $(this).val()
    var dynamicVarValue = myObj[dynamicVariableName];
    $(div).append(dynamicVar);
}

如果您的变量位于窗口下，最好创建包含该变量的新全局对象，而不是将这些变量保留为全局变量。

【讨论】：

将变量放在窗口对象上并不是最佳做法。
@TimOgilvy 好的，谢谢你的建议。
所以通过连接一个字符串可以避免它调用任何有意义的方法或属性。现在对我来说很有意义。

【解决方案2】：

您可以使用eval 动态获取任何变量值。

var variable_1 = "foo";
var variable_2 = "bar";

$("input:checked").each(function() { $(div).append(eval('variable_'+$(this).val())); }

注意：这不是最好的解决方案，因为eval 也存在一些安全问题。

【讨论】：

eval 是一段非常危险的代码。
是的，你是对的 eval 存在一些安全问题。但是，如果他不想使用对象来保存变量值或window 来动态获取变量值，那么我认为 eval 是他可以动态获取值的最后一个选项

【解决方案3】：

因为从用户输入调用变量或函数是危险的，特别是如果您只使用两个不同的变量，您最好使用简单的 if 语句。

这是一个三元如果：

var variable_1 = "foo";
var variable_2 = "bar";

$("input:checked").each(function() {
    var isChecked = $(this).is(':checked');
    var append = (isChecked) ? variable_1 : variable_2;
    $(div).append(append);
}

或者，您可以对多个值使用 switch 语句。

【讨论】：

对，依赖输入值来显示下一个菜单可能很糟糕。让服务器端事件将数据推送回客户端会更好吗？这将防止某些聪明人更改值影响下一个菜单。

【解决方案4】：

如果变量是全局变量，那么您可以使用

var y = window["variable_" + x];

阅读或

window["variable_" + x] = y;

动态写入它们。

然而，更好的做法是使用一个对象来存储它们，而不是使用单独的变量...

var data = { variable_1: null,
             variable_2: null };

...

y = data["variable_" + x];

Javascript 也可以使用eval 来访问动态变量，甚至是局部变量也足够惊人

function foo(s) {
    var x = 12;
    return eval(s);
}

console.log(foo("x"));

更令人惊奇的是，这允许动态创建新的局部变量...

var y = 42;

function foo(s) {
    var x = 1;
    eval(s);
    return y; // may be global y or a local y defined by code in s
}

foo("x")          // returns 42
foo("var y = 99") // returns 99 (but global y is not changed!)

但是eval 的这些用法应该被认为是一个错误而不是一个特性，最好避免（它们也使代码基本上无法优化或理解，所以“不要这样做”™）。

【讨论】：