JavaScript 中的“变量”变量

IT技术 javascript variables variable-variables
2020-12-15 23:18:22

我知道在 PHP 中可能有“可变”变量。例如,

$x = "variable";
$$x = "Hello, World!";
echo $variable; // Displays "Hello, World!"

是否可以在 JavaScript 中通过名称将变量引用为字符串?怎么做?

6个回答

tl;博士:不要使用eval

对此没有单一的解决方案。可以通过 动态访问某些全局变量window,但这不适用于函数的局部变量。成为 属性的全局变量是windowletandconstclasses定义的变量

几乎总有比使用可变变量更好的解决方案!相反,您应该查看数据结构并为您的问题选择正确的结构

如果您有一组固定的名称,例如

// BAD - DON'T DO THIS!!!
var foo = 42;
var bar = 21;

var key = 'foo';
console.log(eval(key));

将这些名称/值存储为对象的属性并使用括号表示法动态查找它们:

// GOOD
var obj = {
  foo: 42,
  bar: 21,
};

var key = 'foo';
console.log(obj[key]);

ES2015+ 中,使用简洁的属性符号对现有变量执行此操作更容易

// GOOD
var foo = 42;
var bar = 21;
var obj = {foo, bar};

var key = 'foo';
console.log(obj[key]);


如果您有“连续”编号的变量,例如

// BAD - DON'T DO THIS!!!
var foo1 = 'foo';
var foo2 = 'bar';
var foo3 = 'baz';

var index = 1;
console.log(eval('foo' + index));

那么您应该改用数组并简单地使用索引来访问相应的值:

// GOOD
var foos = ['foo', 'bar', 'baz'];
var index = 1;
console.log(foos[index - 1]);

定义多个值的示例: var x=1; var x,y=2; x=1;var x=1,y=2; var x=xx=1; 变量 y=x+x;
2021-02-06 23:18:22
2021年eval在这方面变得毫无用处;至少在现实世界的应用中。即使您的 CSP 允许eval,我也不知道任何不通过某些缩小器运行的生产代码,这会弄乱您的变量名称。
2021-02-08 23:18:22

如果您不顾一切地这样做,您可以尝试使用 eval():

var data = "testVariable";
eval("var temp_" + data + "=123;");
alert(temp_testVariable);

或者使用 window 对象:

var data = "testVariable";
window["temp_" + data] = 123;
alert(window["temp_" + data]);
eval不能在严格模式下创建局部变量。但是,间接调用可以创建全局变量。
2021-03-02 23:18:22

要仅使用字符串引用 JavaScript 中的变量,您可以使用

window['your_variable_name']

您也可以设置和引用变量以及变量中的对象。

与 PHP 不同,JavaScript 不提供对 globals 数组(包含对当前声明的所有变量名的引用)的访问。因此,JavaScript 不提供对变量变量的原生支持。但是,只要将所有变量定义为数组或对象的一部分,就可以模拟此功能。这将反过来为您创建一个全局数组。例如,不要hello像这样在全局范围内声明变量

var hello = 'Hello, World!';

让我们把它封装在一个对象中。我们将调用该对象vv(变量变量):

var vv = {
    'hello': 'Hello, World! ',
    //Other variable variables come here.
},
referToHello = 'hello';

现在我们可以通过索引来引用变量,并且由于可以使用变量提供数组索引,我们实际上是在使用变量变量:

console.log(vv[referToHello]); //Output: Hello, World!

你的问题的答案

让我们将此应用于您在原始问题中提供的代码:

    var vv = {
        'x': 'variable',
        'variable': 'Hello, World!'
    };
    console.log(vv[vv['x']]); // Displays "Hello, World!"

实际用途

虽然前面的代码可能看起来非常繁琐和不切实际,但在 JavaScript 中使用这种类型的封装变量变量有实际用途。在下面的示例中,我们使用相同的概念来获取未定义数量的 HTML 元素的 ID。

var elementIds = [],
        elements = ['message','fillOrStroke','sizePicker','colorPicker']; //The items in this array could be defined automatically via an input, database query, event, etc.
        elements.forEach( (element) => {
            elementIds[element] = document.getElementById(element);
        });

本例elementIds根据每个元素的ID声明变量变量(keys in ),并将该元素的节点赋值为每个变量的值。并且因为在 JavaScript 中使用全局变量通常是不鼓励的,所以给你的变量变量一个唯一的范围(在这种情况下,在elementIds数组中声明它们)不仅整洁,而且更负责任。

var vars = {};
var var_name = "str";
vars[var_name] = "working";
console.log(vars["str"]);