Добавление динамических свойств в объект JavaScript

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

let obj = {};
// Добавление свойства происходит так же просто, как добавление нового кусочка сыра на пиццу 🍕
obj['newKey'] = 'newValue';

Чтобы новому свойству 'newKey' объекта obj присвоить значение 'newValue', достаточно создать его и установить необходимое значение. Замените 'newKey' на любое значение переменной или строку для того, чтобы задать динамическое имя свойства.

Вычисление динамических свойств с использованием ES6

const variable = 'dynamicKey';
// Вычисляем имя свойства из переменной
const obj = { [variable]: 'dynamicValue' };

Синтаксис вычисляемых свойств, предоставленный нам ES6, — это настоящий прорыв! Он позволяет создавать объекты с несколькими динамическими свойствами и делает литералы объектов более выразительными, когда названия свойств требуется получить из выражений.

Внедрение выражений с использованием шаблонных литералов

const uniqueId = Date.now();
// Используем шаблонные литералы для формирования названий с присвоением уникальных имен свойств
const obj = { [`Camel_${uniqueId}`]: 'Бежит быстрее с уникальным идентификатором!' };

ES6 привнёс в нашу жизнь шаблонные литералы, уникальный инструмент для формирования имен свойств с интеграцией выражений. Это то, что нам нужно, чтобы придумать креативные и неповторимые ключи для отслеживания данных.

Настройка свойств с помощью Object.defineProperty()

let obj = {};
// Настраиваем свойства с элегантностью через Object.defineProperty() 😎
Object.defineProperty(obj, 'newKey', {
  value: 'newValue',
  writable: true, // Свойство доступно для записи, можете почувствовать себя Шекспиром!
  enumerable: true,
  configurable: true 
});

Object.defineProperty() предоставляет вам необходимые инструменты, чтобы тонко настраивать свойства и контролировать их поведение.

Новый хранитель порядка

// При использовании eval() вы всегда рискуете встретиться с проблемами... 🙅‍♂️
// eval("obj." + userInput + " = 'value'") — это ненадёжный подход

Избегайте проблем с безопасностью с помощью функциональности ES6 и нотации через скобки, которые обеспечивают сохранность и гибкость вашего кода.

Отметка за универсальность

JavaScript – это язык, который предлагает возможность динамического добавления свойств, позволяя легко адаптироваться к изменениям и мгновенным пользовательским вводам. Для создания мощного и надёжного кода освойте точечную и скобочную нотации, синтаксис вычисляемых свойств и возможности Object.defineProperty().

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

Представьте себе конструктор (🏗️), в который можно добавлять блоки с индивидуально нанесёнными этикетками:

let buildingBlocks = {};
// Конструируем блоки с динамическими именами

function addBlock(building, blockName, blockValue) {
  building[blockName] = blockValue; // Вставляем блок в конструктор
}

addBlock(buildingBlocks, 'window', '🪟'); // Окно на месте!
addBlock(buildingBlocks, 'door', '🚪'); // Дверь установлена!

Создаём наш собственный уникальный объект с динамическими свойствами:

Структура (🏗️): {}

После добавления 'window': { window: '🪟' }
После добавления 'door':   { window: '🪟', door: '🚪' }

Мы создаём на лету пользовательские блоки — это почти как увлекательный набор Lego.

Асинхронные операции в синергии с динамическими свойствами

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

// Полуаем данные асинхронно...
async function fetchDataAndAssign(obj, key, url) {
  const response = await fetch(url);
  const data = await response.json();
  obj[key] = data; // Объект получает новое ценное свойство!
}

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

Перечисление динамических свойств? Проще простого!

Чтобы перечислить динамические свойства, используем Object.keys(), Object.values() или Object.entries(). Это сделать легко и непринуждённо:

// Перебор динамических свойств также лёгок, как посчитать печеньки! 🍪
for (const [key, value] of Object.entries(obj)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

Доступ к значениям динамических свойств

Прямой доступ

Замените propertyName на имя нужного вам свойства:

const propName = 'myDynamicProperty';
// Доступ к значению: obj[propName], так же просто, как сорвать яблоко с дерева! 🍎
const value = obj[propName];

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

Доступ через функцию

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

// Функция для доступа к динамическим свойствам: берём и движемся! 🏁
function getPropValue(obj, propName) {
  return obj[propName];
}

Безопасный шаблон доступа

Оператор условной цепочки (?.) обеспечивает безопасный доступ к глубоко вложенным динамическим свойствам без риска возникновения ошибки при выполнении кода:

// Не трогайте! Безопасный доступ к глубоко вложенным динамическим свойствам с использованием `?.`
const value = obj?.[dynamicKey]?.nestedProp;

Эта функциональность обеспечивает стабильность и безопасность при работе с внешними данными.

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

1. Работа с объектами в JavaScript — мастер-класс MDN по манипулированию объектами в JavaScript.
2. Понимание объектов в JavaScript — обширное руководство по объектам в JavaScript.
3. Цикл for/in в JavaScript — описание использования цикла for..in для перебора свойств объекта.
4. Дескрипторы и флаги свойств — руководство об Object.defineProperty() и его влиянии на поведение свойств.
5. Спецификация языка ECMAScript 2015 (ECMA-262 6-е издание) — официальная документация ECMAScript 2015, включающая описание введения вычисляемых свойств.
6. Создание объектов в JavaScript: паттерны и лучшие практики — полный обзор создания объектов в JavaScript, включающий паттерны и лучшие практики.
7. Как использовать переменную в качестве ключа в литеральном объекте JavaScript? — обсуждение на Stack Overflow с практическими рекомендациями по использованию динамических свойств в объектах.