迹忆客 专注技术分享

本教程是关于 JavaScript 动态变量名的，我们将在其中了解它的定义、创建和在 JavaScript 中的使用。我们不使用硬编码动态变量，而是在程序执行期间自动生成。

我们可以使用 eval() 函数和 window 对象来学习 JavaScript 动态变量名称。

eval() 是一个全局对象的函数属性，它执行表示为字符串的 JavaScript 代码。

eval() 如果它的参数是一个表达式，则计算表达式，如果它的参数是一个或多个 JavaScript 语句，则运行语句。

我们还可以使用 window 对象在 JavaScript 中创建动态变量。它是在我们的浏览器上运行的全局对象。

让我们通过示例代码来理解这两种方式。

在 JavaScript 中使用 eval() 创建动态变量名

JavaScript 代码：

var j = 'item';
var i = 0;
for(i = 1; i < 5; i++) {
 eval('var ' + j + i + '= ' + i + ';');
}
console.log("Item1 = " + item1);
console.log("Item2 = " + item2);
console.log("Item3 = " + item3);
console.log("Item4 = " + item4);

输出：

"Item1 = 1"
"Item2 = 2"
"Item3 = 3"
"Item4 = 4"

在上面的代码中，我们使用 eval() 创建动态变量名称，它执行声明 item 并分配 i 的值的语句。

在 JavaScript 中使用 window 对象创建动态变量名

JavaScript 中的一切都是 Context（一种对象）和 Object。在函数的情况下，每个变量都存储在 Variable 或 Activation Object 中。

我们可以在 Global Scope 中隐式写入变量，等于浏览器中的 window，并且可以通过 bracket 或 dot 表示法访问。

JavaScript 代码：

var num1 = 1,
num2 = 2,
num3 = 3;

var newNumberViaDot = window.num1;
var newNumberViaBracket = window['num1'];

console.log("Dynamic variable via dot notation");
console.log(newNumberViaDot);
console.log("Dynamic variable via bracket notation");
console.log(newNumberViaBracket);

输出：

"Dynamic variable via dot notation"
1
"Dynamic variable via bracket notation"
1

上述创建动态变量名称的技术仅适用于全局对象。原因是全局对象的变量对象是 window 对象本身。

我们无法访问函数的 Context 中的 Activation Object。请参阅以下代码。

function numbersFunction() {
 this.num1 = 1;
 this.num2 = 2;
 this.num3 = 3;

 var newNumber = window['num1']; // === undefined
 console.log(newNumber);
 newNumber = this['num1']; // === 1
 console.log(newNumber);
}

new numbersFunction();

输出：

undefined
1

在上面给出的片段中，new 创建了 numberFunction() 的实例；没有它，numberFunction() 的范围将是全局的，等于 window 对象。此示例打印 undefined 和 1。