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

JavaScript 对象文字中的动态键值分配

尽管 JavaScript 在动画中广泛使用，但在使用变量时却带来了挑战作为对象文字中的键。 While 语法类似于“.stop().animate({ 'top' : 10 }, 10);”无缝地将值分配给用引号括起来的键，尝试使用变量作为键，如“var thetop = 'top'; .stop().animate({ thetop : 10 }, 10);”，但会失败.

差异背后的原因

{ thetop : 10 }构成有效的对象字面量语法。该代码指示 JavaScript 创建一个具有名为 thetop 的属性的对象，并为其指定值 10。值得注意的是，{ thetop : 10 } 和 { "thetop" : 10 } 都会生成相同的对象结构。

规避ES5及更早版本的限制

ES6之前，利用变量作为属性对象文字中的名称是不可能的。解决方法包括首先创建对象文字，然后使用变量作为键为其属性赋值，例如：

var thetop = "top";
var aniArgs = {};
aniArgs[thetop] = 10;
<something>.stop().animate(aniArgs, 10);

ES6 和计算属性名称的出现

ES6 通过在对象字面量语法中引入 ComputedPropertyNames 彻底改变了这一领域。这一进步使得编码类似于：

var thetop = "top", obj = { [thetop]: 10 };
console.log(obj.top); // -> 10

这种现代化的语法使开发人员能够在当代版本的主流浏览器中无缝地使用变量作为对象文本中的属性名称。

以上是如何在 JavaScript 对象文字中使用变量作为键？的详细内容。更多信息请关注PHP中文网其他相关文章！