Создание объекта с динамическими ключами в 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]);
Полезные материалы
- Работа с объектами – JavaScript | MDN — всё о создании и управлении объектами в JavaScript от А до Я.
- Объекты JavaScript — основы создания и использования объектов по максимуму.
- Object.defineProperty() – JavaScript | MDN — углублённое управление свойствами объектов.
- Map в ES6 подробно и глубоко — всё, что вы хотели знать о Map в ES6.
- Метапрограммирование – JavaScript | MDN — искусство и наука метапрограммирования с использованием прокси и рефлексии в JavaScript.