Utilisation de noms de propriétés dynamiques dans l'initialisation d'objets avec ES6

Le défi de la création d'objets avec des noms de propriétés dérivés de sources externes se pose souvent en programmation. Dans le scénario décrit dans notre requête, nous tentons de construire un objet JavaScript avec des propriétés dont les clés sont définies dans une variable distincte, KEYS.

Cependant, lors de l'attribution de valeurs aux propriétés au sein de l'objet, nous rencontrons une erreur en raison de l’utilisation de l’opérateur point (.). Cet opérateur est réservé aux noms de propriétés d'objet littéraux et ne peut pas être utilisé avec des noms de propriétés dynamiques.

Pour résoudre ce problème, nous nous tournons vers la puissance d'ES6 (EcmaScript 2016), un ajout récent aux normes JavaScript qui introduit davantage de fonctionnalités. syntaxe et fonctionnalités expressives. L'une de ces fonctionnalités est la syntaxe de propriété calculée, qui nous permet de définir dynamiquement les noms de propriété.

En utilisant la syntaxe de propriété calculée, nous pouvons réécrire le code comme suit, ce qui créera avec succès un objet avec la propriété dynamique souhaitée. noms :

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

Dans ce code, les crochets ([]) autour des noms de propriété indiquent que nous utilisons la syntaxe de propriété calculée. L'expression entre parenthèses correspond au nom de la propriété dynamique, qui est extrait de la variable KEYS.