如何在 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>
执行上述代码后,将生成以下输出。
广告
数据结构
网络
关系数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP