如何在 JavaScript 中创建动态值和对象?


动态值是我们分配给动态变量的值。动态变量是一种在代码中没有通过硬编码指定特定名称的变量类型,它的地址是在代码运行时确定的。术语“动态”指的是能够执行操作和改变的值。

在这里,我们将了解如何在 JavaScript 中创建动态值,这些值也是对象值的一部分,并且可以在将来更改动态变量名称,而无需访问该组。这意味着我们声明一个变量,并在我们的对象中将其用作键之一,如果将来需要更改变量的名称,我们可以在不访问对象的情况下更改它。


要执行上述任务,我们只需要使用方括号 [ ] 在对象中分配变量名称,如下所示:

语法

以下是创建动态值和对象的语法:

const key = 'KeyName';
const obj = { [key] : 'value'};

这里,keyvalue 是用于创建对象的键值对,“obj” 和 keyName 是键的值。

算法

  • 步骤 1 - 定义在创建对象时使用的键。

  • 步骤 2 - 创建一个对象并使用上面定义的键。

  • 步骤 3 - 对上面创建的对象应用 JSON.stringify() 以显示该对象。

示例 1

我们可以使用以下 HTML 程序来查看动态变量的声明。

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

因此,在上面的代码中,我们可以看到我们在对象中声明了两个键 f_name 和 l_name,而没有使用大括号 [],并且我们对 key1 和 key2 变量使用了大括号,因为这两个是动态值。

在输出中,我们可以看到 key1 变量的名称是 Eyecolour,key2 变量的值是 Haircolour。

示例 2

以下代码将更清楚地说明如何在不访问对象的情况下更改动态变量的名称。在这里,我们只需在代码中互换两个动态变量的名称。

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Dynamic values </h2>
   <div id = "result"> </div>
   <script>
      const key1 = "Haircolour";
      const key2 = "Eyecolour";
      const person = {
         f_name : "Rohan",
         l_name :"Joshi",
         [key1] : "Black",
         [key2] : "Brown"
      };

      // Converting the object value to show its value in html
      str = JSON.stringify(person);
      document.getElementById("result").innerHTML = str;

      // To print value of object in console
      console.log(person);
   </script>
</body>
</html>

在输出中,我们可以看到两个变量 key1 和 key2 的值保持不变,但它们的名称已更改,而无需访问对象,这就是我们在 JavaScript 中创建动态值和对象的方式。

更新于: 2022年7月21日

9K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.