如何在 JavaScript 中使用變數鍵訪問物件值?


在本文中,我們將討論如何在 JavaScript 中使用變數鍵訪問物件值。

物件值可以透過點表示法和括號表示法訪問。要透過變數鍵獲取物件值,括號表示法中的值或表示式必須與現有的鍵名稱匹配,然後它將返回一個值。與點表示法不同,括號表示法可以與變數一起使用。如果我們使用帶括號表示法的變數,則該變數必須引用一個字串。

讓我們透過本文後面的示例更好地理解這個概念。

示例 1

以下是一個示例程式,它使用括號表示法“[]”和點表示法“.”訪問物件值。

<!DOCTYPE html>
<html>
<head>
   <title>To access an object value using variable key</title>
</head>
<body style="text-align : center">
   <h3>Access an object value using variable key.</h3>
   <p id="key-value"></p>
   <script>
      let student = { name : 'Rakesh',
         roll_no : 48,
         course : 'Computer Science'
      };
      document.getElementById("key-value").innerHTML = 'The value for student["name"] is : '+student["name"]+'<br/>'+'The value for student.roll_no is : '+student.roll_no+'<br/>'+'The value for student["course"] is : '+student['course'];
   </script>
</body>
</html>

執行上述程式碼後,將生成以下輸出。

示例 2

下面是一個示例程式,用於透過將現有鍵名稱複製到新的變數鍵名稱來使用新的變數鍵名稱訪問物件值。

<!DOCTYPE html>
<html>
<head>
   <title>To access an object value using variable key</title>
</head>
<body style="text-align : center">
   <h3>Access an object value using variable key.</h3>
   <p id="key-value"></p>
   <script>
      let student = { name : 'Rakesh',
         roll_no : 48,
         course : 'Computer Science'
      };
      let Name = 'name';
      let Roll_No = 'roll_no';
      let Course = 'course';
      document.getElementById("key-value").innerHTML = 'The value for student[Name] is : '+student[Name] +'<br/>'+'The value for student[Roll_No] is : '+student[Roll_No]+'<br/>'+"The value for student[Course] is : "+student[Course];
   </script>
</body>
</html>

執行上述程式碼後,將生成以下輸出。

示例 3

下面是一個示例程式,用於使用點表示法訪問物件值。我們可以在點表示法中編寫表示式。點表示法中的表示式在訪問值之前會被計算。當計算出的表示式值與原始鍵名稱匹配時,它將返回一個值。

<!DOCTYPE html>
<html>
<head>
   <title>To access an object value using variable key</title>
</head>
<body style="text-align : center">
   <h3>Access an object value using variable key.</h3>
   <p id="key-value"></p>
   <script>
      let student = { name : 'Rakesh',
         roll_no : 48
      };
      let Name = 'na';
      let Roll_No = 'roll_';
      let Course = 'course';
      student[Course] = 'IT';
      document.getElementById("key-value").innerHTML = 'The value for student[Name+"me"] is : '+student[Name+'me'] +'<br/>'+'The value for student[Roll_No+"no"] is : '+student[Roll_No+'no']+'<br/>'+"The value for student[Course] is : "+student[Course];
   </script>
</body>
</html>

執行上述程式碼後,將生成以下輸出。

更新於: 2022-12-08

14K+ 閱讀量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告