如何在 JavaScript 迴圈中建立動態變數名?
在本教程中,我們將使用 JavaScript 迴圈內部的動態變數名。動態變數名意味著它不是預先硬編碼的,我們可以根據我們的需要從其他一些字串值建立它。
在 JavaScript 中,動態變數的應用並不多,但在開發即時應用程式時是需要的。例如,在開發任何應用程式時,程式設計師希望將任何與使用者相關的實體儲存到與使用者名稱相同的名稱的變數中。在這種情況下,程式設計師需要在 JavaScript 中建立動態變數。
使用者還可以參考以下示例來了解動態變數的需求。假設程式設計師希望在本地儲存中儲存一些值,並且他們需要每個鍵的唯一名稱。為了建立唯一鍵,他們必須使用動態變數。
因此,動態變數有很多應用。下面,我們實現了建立動態變數的不同方法。
使用變數陣列
使用 eval() 方法
使用 Window 物件
使用變數陣列
建立動態變數最簡單的 JavaScript 方法是建立一個數組。在 JavaScript 中,我們可以定義動態陣列而不定義其長度並將其用作 Map。我們可以使用陣列將值與鍵對映,也可以使用鍵訪問值。
語法
使用者可以按照以下語法建立動態陣列以儲存動態變數。
let array = [];
for () {
array[ key ] = value; // dynamically assign value to the key.
}示例
在下面的示例中,我們使用了動態陣列來建立變數。我們透過將數字視為鍵並將平方視為值,儲存了一些偶數的平方。
<html>
<head>
<title>Use dynamic variable names inside JavaScript loop.</title>
</head>
<body>
<h2>Use dynamic variable names inside JavaScript loop.</h2>
<h4>Accessing the different square values from the array.</h4>
<div id="value"></div>
<script>
let value = document.getElementById("value");
let dynamic = [];
// storing the squre of even number in dynamic array
for (let user_id = 0; user_id< 30; user_id += 2) {
dynamic[user_id] = user_id * user_id;
}
value.innerHTML += "square of 4 is - " + dynamic[4] + ". <br/>";
value.innerHTML += "square of 4 is - " + dynamic[10] + ". <br/>";
value.innerHTML += "square of 4 is - " + dynamic[22] + ". <br/>";
</script>
</body>使用 eval() 方法
在 JavaScript 中,**eval()** 方法評估我們作為引數傳遞的表示式。它獲取 JavaScript 表示式的字串並對其進行評估。在我們的例子中,我們將傳遞格式化的字串來建立動態變數。
語法
eval (JavaScript_expression);
引數
**JavaScript_expression** - 它是一個字串格式的 JavaScript 表示式。使用者也可以傳遞格式化的字串。
示例
下面的示例演示了使用eval() 方法建立動態變數。我們有使用者名稱陣列,並且我們根據使用者名稱建立變數並訪問其值,並將它們呈現到螢幕上。
<html>
<body>
<h2>Use dynamic variable names inside JavaScript loop.</h2>
<h4>Creating dynamic variable according to username and storing value into it:</h4>
<div id="value"></div>
<script>
let value = document.getElementById("value");
let user = ["user1", "user2", "user3", "user4", "user5"];
// creating variable same as username and storing userid into that.
for (let user_id = 0; user_id<user.length; user_id++) {
eval('var ' + user[user_id] + '= ' + user_id + ';');
}
value.innerHTML += "value for user1 is - " + user1 + ". <br/>";
value.innerHTML += "Value for user5 is - " + user5 + ". <br/>";
</script>
</body>
</html>使用 Window 物件
**window 物件**在每個瀏覽器中預設定義。使用者可以使用 window 物件訪問程式碼中的每個全域性變數。此外,程式設計師可以使用格式化的字串和 window 物件建立動態變數。
語法
使用者可以按照以下語法將變數儲存在 window 物件中。
for ( let i = 0; i< 10; i++ ) {
window[ ‘user’ + i ] = value;
}
let val = user0; // to access the dynamic variables示例
在這個例子中,我們使用了 window 物件來儲存全域性變數。我們正在從使用者陣列中訪問值,並使用 window 物件將它們設為全域性變數。
<html>
<head>
<title>Use dynamic variable names inside JavaScript loop.</title>
</head>
<body>
<h2>Use dynamic variable names inside JavaScript loop.</h2>
<h4>Creating dynamic variable according to user array and storing to window object.</h4>
<div id="value"></div>
<script>
let value = document.getElementById("value");
let user = ["user1", "user2", "user3", "user4", "user5"];
// creating variable same as username and storing into window object.
for (let user_id = 0; user_id<user.length; user_id++) {
window[ user[user_id] ] = "hello " + user[user_id];
}
value.innerHTML += "value for user 1 is - " + user1 + ". <br/>";
value.innerHTML += "Value for user 5 is - " + user5 + ". <br/>";
</script>
</body>
</html>結論
本教程介紹了三種在迴圈內建立動態變數的不同方法。第一種方法是最簡單且最常用的方法。此外,如果使用者想要建立全域性變數,他們可以使用第三種方法,即使用 window 物件。
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP