JavaScript 中的“变量”变量

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

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

在 JavaScript 中是否可以通过变量的名称将其称为字符串?要怎么做呢?

93648 次浏览

如果你非常渴望这样做,你可以尝试使用 eval () :

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

或者使用 window 对象:

var data = "testVariable";
window["temp_" + data] = 123;
alert(window["temp_" + data]);

Tl; dr: 不要用 eval

这个问题没有单一的解决方案。通过 window动态地访问 一些全局变量是可能的,但是对于函数本地的变量不起作用。不要成为 window属性的全局变量是用 letconst以及 classes 定义的变量。

几乎总有比使用变量更好的解决方案!相反,你应该看看 数据结构,然后选择一个正确的来解决你的问题。

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

// 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 + 中,使用 concise property notation对现有变量执行这一操作更加容易:

// 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));

那么你应该使用一个 array代替,只是使用索引访问相应的值:

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

当然可以,但是不行,变量必须是全局的。

var killingFunction = 'alert'
var killMeNow = 'please'
var please = 'You have been killed!'
this[killingFunction](this[killMeNow])

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

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

window['your_variable_name']

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

可以使用 JavaScripteval(str)函数。

此函数将提供的字符串转换为 JavaScript 代码,然后执行它。

例如:

eval("console.log('Hello, World!')"); // Logs hello world

因此,要将其用作变量,可以执行以下操作:

var a = "Hello,";
var hello = "World!";
console.log(a + " " + eval(a)); // Logs hello world

这将产生与下列产出完全相同的结果:

console.log(a + " " + hello); // Logs hello world

(例子取自 PHP 变量手册。)

与 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!

The Answer To Your Question

让我们将这个应用到您在最初的问题中提供的代码:

    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);
});

此示例根据每个元素的 ID 声明变量变量(elementIds中的键) ,并将所述元素的节点指定为每个变量的值。由于通常不鼓励在 JavaScript 中使用全局变量,因此给变量一个惟一的作用域(在本例中,在 elementIds数组中声明它们)不仅简洁,而且更负责任。

您可以使用 全球性的 window对象或 this:

返回文章页面

var data = "anyVariableName";
window["temp_" + data] = 123;
alert(window["temp_" + data]); //123

或者使用点:

var data = "anyVariableName";
window.data = 123;
alert(window.data); //123

这个:

ar data = "anyVariableName";
this["temp_" + data] = 123;
alert(this["temp_" + data]); //123

或使用点

var data = "anyVariableName";
this.data = 123;
alert(this.data); //123

一个现实生活中的例子:

var tasksTableNameRandom = 'tasksTable_' + Math.random().toString(36).substr(2, 5);
console.log('Tasks Table Object name: ' + tasksTableNameRandom);
this.tasksTableNameRandom = $('#tasks-data-table').DataTable({
...
});