Использование динамических имен свойств при инициализации объектов с помощью ES6

В программировании часто возникает проблема создания объектов с именами свойств, полученными из внешних источников. В сценарии, описанном в нашем запросе, мы пытаемся создать объект JavaScript со свойствами, ключи которого определены в отдельной переменной KEYS.

Однако при присвоении значений свойствам внутри объекта мы сталкиваемся с ошибкой. из-за использования оператора точки (.). Этот оператор зарезервирован для буквальных имен свойств объектов и не может использоваться с динамическими именами свойств.

Чтобы решить эту проблему, мы обратимся к возможностям ES6 (EcmaScript 2016), недавнего дополнения к стандартам JavaScript, которое вводит больше возможностей. выразительный синтаксис и особенности. Одной из этих функций является синтаксис вычисляемых свойств, который позволяет нам динамически определять имена свойств.

Используя синтаксис вычисляемых свойств, мы можем переписать код следующим образом, что позволит успешно создать объект с желаемым динамическим свойством. имена:

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

В этом коде квадратные скобки ([]) вокруг имен свойств указывают на то, что мы используем синтаксис вычисляемых свойств. Выражение внутри скобок равно имени динамического свойства, которое извлекается из переменной KEYS.