Создание объекта с динамическими ключами в JavaScript

Быстрый ответ

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

let key = 'userID';
let value = 123;

// Объект по мотивам Aquaman 🌊💪
let obj = { [key]: value };

Теперь obj имеет свойство userID, значение которого — 123.

Если вы предпочитаете работать со старыми браузерами, не волнуйтесь — используйте привычную нотацию с квадратными скобками:

// Не забываем, что старое — это новое золото, как и Internet Explorer 🌝
obj[key] = value;

И вот было получено: объект obj наделён свойством userID со значением 123.

Вникание в динамические ключи

Динамические ключи порождают эпоху создания объектов, не сдерживаемых строго заданными именами свойств. Этот способ приходится по вкусу в разнообразных кейсах, когда нужно сформировать объект, опираясь на переменные данные. В частности:

• Использование данных, внесённых пользователем, для определения ключей.
• Преобразование локальных объектов в соответствии с данными, полученными от сервера.
• Формирование трансформаций данных, при которых ключам приходится получить новые имена для переноса из одной структуры данных в другую.

С появлением ES6/ES2015 мы получаем простой путь к использованию динамических ключей:

let dynamicKey = 'selected' + itemId;
// Руководство по выделению каждого предмета отдельно 🎁😀
let isSelected = true;

let itemStatus = {
  [dynamicKey]: isSelected
};

Теперь объект itemStatus содержит свойство вида selected23, если itemId равно 23.

Обход подводных камней

Работая с динамическими ключами, следует быть внимательным к потенциальным трудностям:

• Старые версии JavaScript не поддерживают ES2015, поэтому возможно потребуется использование таких транспиляторов, как Babel или Traceur от Google, для обеспечения совместимости.
• Определяя сразу несколько динамических ключей, будьте аккуратны, чтобы не перезаписать уже существующие свойства.
• Для работы с вложенными или сложными объектами может потребоваться специальная логика для сохранения данных при назначении динамических ключей.

Визуализация

Вообразим создание объекта с динамическими ключами:

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

Объект, претендующий на роль ящика для инструментов:

// Таинственный танец инструментального ящика 💃🔧
let key = 'hammer';
let toolbox = {
  [key]: '🔨',
};

🧰 Первоначально: [ ]
🧰 После добавления молотка: [hammer: 🔨]

Вот и всё! Тот, кто стремился стать ящиком для инструментов, достиг своей цели и готов к использованию!

Применение динамических ключей

Управление данными, введёнными пользователем

Представьте, что вы создаёте интерактивную форму, где каждое поле образует объект:

function handleFormInput(fieldName, value) {
  // Ассорти формы 😎🌟
  let formData = {
    [fieldName]: value
  };
  // Обработка отправленных данных из formData
}

Подробнее об этом расскажет наш спикер на видео

Переименование ключей API

Иногда, чтобы внедрить данные в пользовательский интерфейс, нужно переименовать имена ключей:

function renameKeys(data, keyMap) {
  // Индивидуализированные ключи, подаваемые горячими и свежими 🍕😋
  return Object.keys(data).reduce((newData, key) => {
    let newKey = keyMap[key] || key;
    newData[newKey] = data[key];
    return newData;
  }, {});
}

Создание настраиваемых конфигураций

Динамические объекты открыли дорогу к созданию конфигураций для начальной настройки систем:

let settings = {
  [`is${option}`]: isEnabled
};
// Настройки, отражающие индивидуальные предпочтения ⚙️✔️

Вникание в динамические ключи

Объединение объектов с динамическими свойствами

С появлением ES2018 к нашим услугам представлен синтаксис расширения, который существенно упрощает объединение объектов и поддержку динамических свойств:

let dynamicDefaults = { [key]: defaultValue };
// Взаимодействие динамических значений по умолчанию с пользовательскими настройками — что может быть романтичнее? 💕🎬
let userSettings = { ...dynamicDefaults, ...userProvidedSettings };

Динамическое хранение пар ключ-значение с помощью Map

Map особенно удобен при хранении динамических пар ключ-значение:

// 'MAP' в слове mapping. Заметили игру слов? 🧐🗺️
let map = new Map();
map.set(dynamicKey, value);

Метапрограммирование с использованием Proxy

Прокси позволяют управлять динамическими свойствами и задают настраиваемое поведение при обращении к свойствам:

let handler = {
  // Поймал! Теперь я контролирую процесс! 🎈🎯
  get(target, propKey) {
    return propKey in target ? target[propKey] : 42;
  }
};

let proxy = new Proxy({}, handler);
// Возвращает '42', если свойство не существует. Зачем бы и нет? 🚀🪐
console.log(proxy[dynamicKey]);

Полезные материалы

1. Работа с объектами – JavaScript | MDN — всё о создании и управлении объектами в JavaScript от А до Я.
2. Объекты JavaScript — основы создания и использования объектов по максимуму.
3. Object.defineProperty() – JavaScript | MDN — углублённое управление свойствами объектов.
4. Map в ES6 подробно и глубоко — всё, что вы хотели знать о Map в ES6.
5. Метапрограммирование – JavaScript | MDN — искусство и наука метапрограммирования с использованием прокси и рефлексии в JavaScript.