Использование переменной как ключа в объекте JavaScript
Быстрый ответ
Если нужно динамически назначить ключ объекту в JavaScript, применяйте вычисляемые свойства с использованием квадратных скобок [ ]
:
let propName = 'name';
let obj = {
[propName]: 'Алиса' // Теперь всё стало ясно!
};
console.log(obj.name); // Выведет: 'Алиса'
Эта возможность представлена в ECMAScript 2015 (ES6) и позволяет создавать более гибкий код, что крайне полезно при работе с переменными данными.
ES6: Динамическое присвоение ключей свойствам объектов
До ES6
До появления ES6, чтоб использовать значение переменной как ключ, приходилось делать некоторые обходные пути:
var oldKey = 'oldSchool';
var oldObj = {};
oldObj[oldKey] = 'Неплохо!'; // Работает, но это выглядит устаревшим...
Приветствуем ES6
ES6 представик вычисляемые свойства. Теперь можно задавать ключи свойств динамически прямо в объекте:
let dynamicKey = '.Dynamic';
let newObj = {
[dynamicKey]: 'Теперь всё динамично!'
};
Выражение newObj['.Dynamic']
вернёт 'Теперь всё динамично!'
. Это не чары, это новые возможности JavaScript!
Как можно задавать ключи свойствам
ES6 предлагает различные способы именования ключей:
- Строка:
{ "myKey": "Запомнил!" }
- Число:
{ 404: "Страница не найдена" }
// Куда она подевалась? - Идентификатор:
{ validIdentifier: "Всё в норме!" }
- Шаблонные строки:
{[`Key_${expression}`]: "Великолепное сочетание!"}
Преимущества динамических ключей
Динамика в действии
Свойства с динамическими ключами особенно эффективно работают в функциях анимации, например, animate
:
function animate(element, prop, value) {
let animation = {
[prop]: value // Значение 'value' определяет скорость
};
// А теперь начинается анимация...
}
Применение CSS "на лету"
Посмотрим на динамическое применение CSS свойств к DOM элементам:
let cssProperty = 'color';
let cssValue = 'red';
element.style[cssProperty] = cssValue; // И вуаля – элемент стал красным!
Это делает пользовательский интерфейс более отзывчивым и адаптивным.
Визуализация
Отобразим на практике использование динамических ключей объектов:
У нас есть переменная: `keyName = "packageBox"`
Теперь нам нужно передать коробку её новому владельцу:
let packages = {
[keyName]: "📦" // И вуаля – посылка в 'packageBox'!
};
Если проводить аналогию с доставкой:
Состояние коробок до: [📦, 📦, 📦]
Состояние коробок после: [📦, 📦, 📦, packageBox📦]
Динамическая доставка – вы решаете, куда доставить посылку!
Полезные материалы
- Инициализация объектов – JavaScript | MDN — Здесь вы найдёте все об вычисляемых свойствах.
- ECMAScript 6: Новые возможности: Обзор и Сравнение — Углубитесь в детали вычисляемых свойств в ES6.
- JavaScript For In — Познакомьтесь с использованием цикла
for...in
при работе с ключами объекта. - Синтаксис объектов в JavaScript — SitePoint: Расширьте свои знания в синтаксисе объектов JavaScript.
- Методы объекта и "this" — Изучите, как правильно работать с
this
в контексте объектов. - Понимание объектов в JavaScript | DigitalOcean — Поймите глубже принципы работы динамического присваивания свойств и объектов.
- JavaScript set object key by variable – Stack Overflow — Присоединяйтесь к обсуждению способов применения переменных как ключей в комьюнити Stack Overflow.