JavaScript 動態變數名

1. 在 JavaScript 中使用 eval() 建立動態變數名
2. 在 JavaScript 中使用 window 物件建立動態變數名

本教程是關於 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。