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。