如何在 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>
执行上述代码后,将生成以下输出。
广告