如何在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物件。

更新於:2022年7月20日

15K+ 瀏覽量

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告