如何在 JavaScript 对象文字中动态分配属性名称？

了解 JavaScript 中对象文字的行为

在 JavaScript 中使用对象文字时，开发人员可能会遇到需要动态定义属性名称的情况。但是，如果不理解预期的行为，这可能会导致混乱。

考虑提供的示例：

<something>.stop().animate(
    { 'top' : 10 }, 10
);

在这种情况下，代码成功将属性“top”分配给对象字面量中的值 10。这是因为属性名称用单引号括起来，表示一个文字字符串作为属性键。

相反，当使用变量作为属性名称时：

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

代码失败是因为 JavaScript 不支持以这种方式动态生成对象文字的属性名称。在 ES5 之前，实现此目的的唯一方法是通过将值分配给变量属性名称来手动构造对象文字：

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

但是，随着 ES6 的引入，开发人员现在可以访问 Computed对象文字的属性名称。使用这种新语法，属性名称可以动态指定为方括号中括起来的表达式：

var thetop = "top";
var obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

此语法允许开发人员使用动态分配的属性名称创建对象文字，就像使用文字字符串的原始示例一样作为属性键。

以上是如何在 JavaScript 对象文字中动态分配属性名称？的详细内容。更多信息请关注PHP中文网其他相关文章！