Создание свойств объекта через переменные в JavaScript
Быстрый ответ
В JavaScript для создания свойства объекта с динамическим именем используйте вычисляемые имена свойств, записываемые в квадратных скобках []
. Такой подход позволяет определить ключ свойства с использованием переменной:
let key = 'dynamicKey';
let obj = { [key]: 'value' };
console.log(obj.dynamicKey); // Вывод: 'value'
Добавление свойств объекта на лету
Если требуется дополнить объект свойствами после его инициализации, примените квадратные скобки. Используя переменную в роли ключа, вы сможете легко присвоить значение свойству:
let myObj = {}; // Создаем новый объект
let propName = 'status';
let propValue = 'active';
myObj[propName] = propValue;
console.log(myObj[propName]); // Вывод: 'active'
Такая прогибкость приходится по назначению, когда ключи генерируются динамически или содержат символы, некорректные для обычных идентификаторов.
Использование вычисляемых имен свойств
Внедрение ES6 подняло программирование на новый уровень, в частности благодаря возможности использовать вычисляемые имена свойств. Теперь для обозначения ключей в литералах объектов могут применяться выражения:
let dynamicKey = 'property_name';
let myObject = {
[dynamicKey]: 'value'
};
// Современно и просто!
Такая схема упрощает код, делая его более сжатым и понятным, особенно когда создание объекта реализуется в одну строку.
Битва нотаций: точка против скобок
JavaScript предлагает две формы записи для доступа к свойствам объектов: через точку и с использованием скобок.
Нотация через точку проста и удобна, однако она имеет ограничения. Она подходит только для имен свойств, которые отвечают критериям допустимых идентификаторов и не могут быть переменными.
Нотация с скобками позволяет использовать любые строки в качестве ключей свойств, включая переменные. Благодаря такой универсальности, нотация с скобками часто бывает более предпочтительна.
let myObj = {};
let propName = "Это не Спарта!";
myObj[propName] = 'Value'; // Нотация с скобками в действии!
Необычные способы решения
Если вас интересуют нетипичные методы, рассмотрите IIFE (немедленно вызываемые функциональные выражения) и использование запятой.
IIFE дают возможность определить свойство через функцию, которая будет выполнена сразу после её объявления:
let myObj = {
prop: (function(a) { return a * 42; })(10)
};
// Свойство 'prop' равно 420, прекрасный результат!
Запятая может показаться необыкновенным инструментом, но она способна объединять несколько действий в одном месте:
let a = 'one', b = 'two', val1 = 42, val2 = 69, myObj = {};
(myObj[a] = val1, myObj[b] = val2);
// Устанавливаем значения 'one' и 'two' в объект myObj
"Магия" ES6
ES6 внесло в язык такую особенность как сокращенные имена свойств – когда имя переменной совпадает с ключом свойства, можно опустить дублирование:
let a = 'Hello', b = 'World';
let myObj = {a, b};
console.log(myObj.b); // Вывод: 'World'
Полезные материалы
- Работа с объектами – JavaScript | MDN – подробное руководство по объектам JavaScript.
- Погружение в ECMAScript 6 | Leanpub – глубинное исследование нововведений в объектной модели ES6.
- Спецификация языка ECMAScript® 2024 – официальные подробности инициализации объектов в ECMAScript.
- Как в JavaScript задать ключ объекта из переменной – Stack Overflow – обсуждения и решения из профессионального сообщества по работе с динамическими ключами объекта.
- 14. Объектно-ориентированные возможности за пределами классов – обзор свойств объектов и функциональности ООП в ES6.
- Целостный справочник по объектам JavaScript – исчерпывающий справочник по объектам JavaScript от W3Schools.
- Структуры данных: объекты и массивы :: Eloquent JavaScript – организация данных в JavaScript, включая использование объектов и массивов.