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

如何在 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 对象时学会了使用变量作为键。当我们使用变量作为键时,它实际上使用变量的值作为键。

以上就是如何在 JavaScript 对象文字中使用变量作为键?的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)