JavaScript 動態變數名

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 eval() 建立動態變數名
  2. 在 JavaScript 中使用 window 物件建立動態變數名
JavaScript 動態變數名

本教程是關於 JavaScript 動態變數名的,我們將在其中瞭解它的定義、建立和在 JavaScript 中的使用。我們不使用硬編碼動態變數,而是在程式執行期間自動生成。

我們可以使用 eval() 函式和 window 物件來學習 JavaScript 動態變數名稱。

eval() 是一個全域性物件的函式屬性,它執行表示為字串的 JavaScript 程式碼。

eval() 如果它的引數是一個表示式,則計算表示式,如果它的引數是一個或多個 JavaScript 語句,則執行語句。

注意
eval() 也可以在未經你許可的情況下在應用程式中執行惡意程式碼。這樣,應用程式的範圍也對第三方可見,從而導致可能的攻擊。因此,除了學習目的之外,最好從不使用 eval

我們還可以使用 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。在函式的情況下,每個變數都儲存在 VariableActivation Object 中。

我們可以在 Global Scope 中隱式寫入變數,等於瀏覽器中的 window,並且可以通過 bracketdot 表示法訪問。

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 物件。此示例列印 undefined1

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Variable