Comment créer des objets JavaScript avec des noms de propriétés dynamiques ?

Création d'objets avec des noms de propriétés dynamiques

En JavaScript, les objets sont généralement définis à l'aide de paires clé-valeur littérales. Cependant, il existe des cas dans lesquels vous pouvez rencontrer un scénario dans lequel les noms de propriétés sont dynamiques ou inconnus au moment de la création de l'objet. Ceci peut être réalisé grâce à l'utilisation de la notation entre crochets.

Problème :

Considérez l'extrait de code suivant :

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'
    };
    ...
};

Ce code échoue avec l'erreur "Attendu ':' et à la place j'ai vu '.'." En effet, vous essayez d'accéder à l'objet KEYS en tant que propriété de l'objet myAppConfig en utilisant la notation par points (.). Pour résoudre ce problème, vous devez utiliser la notation entre crochets [] pour accéder aux propriétés de manière dynamique.

Solution :

En utilisant ES6 (ou un transpileur comme Babel/browserify), vous pouvez initialiser un objet avec des noms de propriétés dynamiques en utilisant la notation entre crochets, comme indiqué ci-dessous :

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

Dans ce code, les crochets [] autour des propriétés KEYS vous permettent de spécifier dynamiquement les noms de propriétés en fonction des valeurs stockées dans l'objet KEYS. En conséquence, la propriété iconMap de l'objet myAppConfig contiendra le mappage de valeurs souhaité :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!