如何在 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+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告