How to use variables as keys in JavaScript object literals?-JS Tutorial-php.cn

How to use variables as keys in JavaScript object literals?

WBOY

Release： 2023-08-28 08:25:07

forward

1134 people have browsed it

如何在 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;

Copy after login

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>

Copy after login

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>

Copy after login

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!