search

Home >Web Front-end >JS Tutorial >How to use variables as keys in JavaScript object literals?

How to use variables as keys in JavaScript object literals?

WBOY
WBOYforward
2023-08-28 08:25:071175browse

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

In JavaScript, sometimes we need to use variables as object keys. For example, when getting data from an API and not sure all the response data properties, we have to iterate the response object and store each of its properties.

However, we cannot use variables as keys when creating an object, but after creation, we can add variable properties to the object.

grammar

Users can use variables as keys in JavaScript objects according to the following syntax. 

object[key] = value;

In the above syntax, "key" is a variable containing a certain value.

Example

In the following example, we create an object containing table properties. Additionally, we created the "dimensions" variable to store the table's dimensions. The "key" variable contains "dimensions" as a string value.

After creating the object, we use the "key" variable as the object attribute and the value of the "dimension" variable as the object attribute value. 

<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>

In the output, the user can observe that the table dimensions are stored as values ​​of the "dimensions" object.

Example

In the example below, we create an empty object. After that, we performed 10 iterations using a for loop. We use "I" as the key and i*i as the attribute value in each iteration.

This way we store the square of the number as the value and the number itself as the key. 

<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>

Users learned to use variables as keys when creating JavaScript objects. When we use a variable as a key, it actually uses the value of the variable as the key.

The above is the detailed content of How to use variables as keys in JavaScript object literals?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Working with JSON-formatted data in SnackNext article：Working with JSON-formatted data in Snack

Related articles

See more