如何在 JavaScript 对象字面量中使用变量作为键？

在 JavaScript 中，有时我们需要使用变量作为对象键。例如，当从 API 获取数据并且不确定所有响应数据属性时，我们必须遍历响应对象并存储其每个属性。

但是，我们在创建对象时无法使用变量作为键，但创建后，我们可以将变量属性添加到对象中。

语法

用户可以按照以下语法在 JavaScript 对象中使用变量作为键。

object[key] = value;

在上述语法中，'key' 是一个包含某个值的变量。

示例

在下面的示例中，我们创建了一个包含表格属性的对象。此外，我们创建了 'dimensions' 变量来存储表格的尺寸。'key' 变量包含 'dimensions' 作为字符串值。

创建对象后，我们使用 'key' 变量作为对象属性，并使用 'dimension' 变量的值作为对象属性值。

<html>
<body>
   <h2>Using variables as key of JavaScript object</h2>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById("content");
      let object = {
         "table_id": 1,
         "table_name": "table1",
         "table_price": 100
      };
      let dimesions = "100 x 100";
      let key = "dimensions";
      object[key] = dimesions;
      for (let key in object) {
         content.innerHTML += key + " : " + object[key] + "<br>";
      }
   </script>
</body>
</html>

在输出中，用户可以观察到表格尺寸存储为 'dimensions' 对象的值。

示例

在下面的示例中，我们创建了一个空对象。之后，我们使用 for 循环进行 10 次迭代。我们在每次迭代中使用 'I' 作为键，并使用 i*i 作为属性值。

这样，我们将数字的平方作为值存储，并将数字本身作为键。

<html>
<body>
   <h2>Using variables as key of JavaScript object</h2>
   <div id="content"> </div>
   <script>
      let content = document.getElementById("content");
      let object = {};
      for (let i = 0; i < 10; i++) {
         object[i] = i * i;
      }
      content.innerHTML = "The object is: " + JSON.stringify(object) + "<br>";
      for (let i = 0; i < 10; i++) {
         content.innerHTML += "The square of " + i + " is " + object[i] + "<br>";
      }
   </script>
</body>
</html>

用户学习了如何在创建 JavaScript 对象时使用变量作为键。当我们使用变量作为键时，它实际上使用变量的值作为键。

更新于： 2023年4月6日

11K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告