如何在 JavaScript 中为对象设置动态属性键?


在下面的示例中,我们将学习如何在 JavaScript 中为对象设置动态属性键。

要向 JavaScript 中的对象添加动态属性键,有三种可能的方法。有三种可能的方法可以为对象设置动态属性键。第一种可能的方法是创建一个键并将其分配给对象,第二种可能的方法是使用 define property 方法为对象设置动态属性键,第三种可能的方法是使用 ES6 方法为对象设置动态属性键。我们用合适的例子讨论了每种方法。

示例 1

以下程序是创建键并将其分配给对象的示例。

<!DOCTYPE html>
<html>
<head>
   <title>To set dynamic property keys to an object in JavaScript</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align : center">
   <h3>To set dynamic property keys to an object in JavaScript</h3>
   <p id="dynamic-keys"></p>
   <script>
      let Employee = { name : 'Vinay',
         emp_id : 101
      };
      let key = "Company";
      Employee[key] = 'Tutorials Point';
      document.getElementById("dynamic-keys").innerHTML = 'Employee["name"] : '+ Employee['name'] +'<br/>'+'Employee["emp_id"] : '+Employee['emp_id']+'<br/>'+"Employee[key] : "+Employee[key];
   </script>
</body>
</html>

执行上述代码后,将生成以下输出。

示例 2

以下是一个使用 define property 方法为对象设置动态属性键的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>To set dynamic property keys to an object in JavaScript</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align : center">
   <h3>To set dynamic property keys to an object in JavaScript</h3>
   <p id="dynamic-keys"></p>
   <script>
      let Employee = { name : 'Vinay',
         emp_id : 101
      };
      let key = "Company";
      Employee[key] = 'Tutorials Point';
      let key2 = 'role';
      Object.defineProperty(Employee, key2,{value: 'Software Engineer'})
      document.getElementById("dynamic-keys").innerHTML = 'Employee["name"] : '+ Employee['name'] +'<br/>'+'Employee["emp_id"] : '+Employee['emp_id']+'<br/>'+"Employee[key] : "+Employee[key]+'<br/>'+"Employee[key2] : "+Employee[key2];
   </script>
</body>
</html>

执行上述代码后,将生成以下输出。

示例 3

以下是一个使用 ES6 方法为对象设置动态属性键的示例程序。

<!DOCTYPE html>
<html>
<head>
   <title>To set dynamic property keys to an object in JavaScript</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<ody style="text-align : center">
   <h3>To set dynamic property keys to an object in JavaScript using ES6 Method.</h3>
   <p id="dynamic-keys"></p>
   <script>
      let key1 = "Company";
      let key2 = 'role';
      let Employee = { name : 'Vinay',
         emp_id : 101,
         [key1] : 'Tutorials Point',
         [key2] : 'Software Engineer'
      };
      document.getElementById("dynamic-keys").innerHTML = 'Employee["name"] : '+ Employee['name'] +'<br/>'+'Employee["emp_id"] : '+Employee['emp_id']+'<br/>'+"Employee[key1] : "+Employee[key1]+'<br/>'+"Employee[key2] : "+Employee[key2];
   </script>
</body>
</html>

执行上述代码后,将生成以下输出。

更新于: 2022-12-08

2K+ 浏览量

启动您的 职业生涯

通过完成课程获得认证

开始
广告