如何使用动态属性名称创建 JavaScript 对象？-js教程-PHP中文网

如何使用动态属性名称创建 JavaScript 对象？

Susan Sarandon

发布： 2024-12-03 12:35:11

原创

127 人浏览过

How to Create JavaScript Objects with Dynamic Property Names?

使用动态属性名称创建对象

在 JavaScript 中，对象通常使用文字键值对来定义。但是，在某些情况下，您可能会遇到属性名称是动态的或在创建对象时未知的情况。这可以通过使用括号表示法来实现。

问题：

考虑以下代码片段：

var KEYS = {} ;

KEYS.PHONE_TYPE = 'phone-type';
KEYS.AGENT_TYPE = 'agent-type';

var myAppConfig = {
    ...
    iconMap : { 
        KEYS.PHONE_TYPE : 'icon-phone', 
        KEYS.AGENT_TYPE : 'icon-headphones'
    };
    ...
};

登录后复制

此代码失败错误“预期为 ':'，却看到了 '.'。”这是因为您尝试使用点符号 (.) 将 KEYS 对象作为 myAppConfig 对象的属性进行访问。为了解决这个问题，你需要使用括号符号 [] 来动态访问属性。

解决方案：

使用 ES6（或像 Babel/browserify 这样的转译器），您可以使用括号表示法用动态属性名称初始化对象，如下所示：

iconMap : { 
    [KEYS.PHONE_TYPE] : 'icon-phone', 
    [KEYS.AGENT_TYPE] : 'icon-headphones'
};

登录后复制

在此在代码中，KEYS 属性周围的方括号 [] 允许您根据 KEYS 对象中存储的值动态指定属性名称。因此，myAppConfig 对象的 iconMap 属性将包含所需的值映射：

{
    'phone-type' : 'icon-phone',
    'agent-type' : 'icon-headphones'
}

登录后复制

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