Добавление свойств в объект JavaScript по условию: приемы

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

Для добавления свойств в объект в JavaScript условно, используйте оператор расширения (...) совместно с синтаксисом литерала объекта:

const hasSuperPowers = true;
const hero = {
  name: 'Супермен',
  ...(hasSuperPowers && { power: 'Полёт' })  // Зависимость добавления "power" от значения hasSuperPowers
};

Также есть возможность использовать стандартный условный оператор if для добавления элементов в уже существующий объект:

let hero = { name: 'Бэтмен' };
if (hasSuperPowers) hero.power = 'Гениальный интеллект';  // Не забываем про его сложный характер

Защита целостности объекта

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

let hero = { name: 'Робин' };
const power = fetchHeroPower('Робин');  // Эта функция обнаруживает скрытые способности Найтвинга...

// Свойство "power" добавляем только если оно определено
if (power !== undefined) hero.power = power;

Масштабирование с множеством условных свойств

Когда требуется добавить несколько условных свойств, сочетайте операторы расширения:

const canFly = true, hasMoney = false;

const hero = {
  name: 'Человек-паук',
  ...(canFly && { power1: 'Полёт' }),
  ...(hasMoney && { power2: 'Богатство' }) // О, Человек-паук, у тебя не повезло с богатством
};

// В объекте hero появятся "name" и "power1" (полёт), в то время как "power2" не появится

Такой подход повышает читаемость и надёжность кода.

Условные свойства с использованием Object.assign()

Метод Object.assign() эффективно помогает при добавлении условных свойств:

const canFly = true;

const hero = Object.assign(
  { name: 'Росомаха' },
  canFly ? { power: 'Полёт' } : null
);
// Росомаха не обладает способностью к полёту... по крайней мере, без помощи Air Canada

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

Подход jQuery к условным свойствам

Для предпочитающих jQuery есть метод $.extend(), представляющий простое решение:

const canFly = true;
const hero = $.extend(
  { name: 'Флэш' },
  canFly && { power: 'Полёт' }  // Флэш, попробуй догнать самолёт, если сможешь!
);

Метод функционирует аналогично оператору расширения, но в контексте jQuery.

Чистые объекты с использованием краткого замыкания

Оператор логического И (&&) способствует предотвращению наличия ненужных свойств в объектах:

const canFly = false;

const hero = {
  name: 'Аквамен',
  ...canFly && { power: 'Полёт' }  // Аквамен, как здесь подняться в воздух?
};

Логическое И гарантирует добавление свойств только при точном выполнении условия.

Создание динамичных объектов при помощи условных свойств

Объекты могут быть такими же динамичными, как супергерои, благодаря этим условным свойствам:

const settings = { name: fetchHeroName() };

const hero = {
  ...settings,
  ...(isHeroHuman() && { weakness: 'Смертная жизнь'})   // Исключением будут лишь Тор и Киану Ривз
};

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

Представьте, что вы составляете список участников секретного собрания супергероев. Не всем участникам дано преимущество "бессмертие" (конечно, кроме Тора и Нео):

let meetupInvite = {
  heroName: 'Человек-паук',
  date: '2022-10-31',
  secretBase: 'Башня Мстителей'
  // О бессмертии пока ничего не говорим
};

const isImmortal = findOutIfImmortal();
if (isImmortal) {
  meetupInvite.immortality = true;  // Бессмертие гарантировано, пока только Зелёный Гоблин не вмешается
}

Вот как выглядит приглашение:

Без бессмертия: [🕷️, 📅, 🏰]
С бессмертием (если обладает бессмертием): [🕷️, 📅, 🏰, ∞]

И вот наш Человек-паук получает условное бессмертие в свою коллекцию геройских привилегий!

Предотвращение загрязнения объекта свойствами с проверками на undefined

Сложная структура данных может иногда приводить к значению undefined:

const heroAttributes = fetchHeroAttributesFromAPI();
const hero = {
  name: heroAttributes.name,
  ...(heroAttributes.age > 21 && { drinkingAge: true })
};
// Добавляем свойство "drinkingAge", только если возраст героя превышает 21 и задан

Такой подход гарантирует "чистоту" объектов и способствует поддержанию точности данных на высоком уровне.

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

1. Условный (тернарный) оператор – JavaScript | MDN — подробное описание условных операторов в JavaScript.
2. Оператор расширения (...) – JavaScript | MDN — глубокое изучение оператора расширения в JavaScript.
3. Выражения и операторы – JavaScript | MDN — подробное описание операторов в JavaScript.
4. Объекты JavaScript – W3Schools — отличное руководство по ключевым аспектам объектов в JavaScript.
5. Как я могу добавить пару ключ/значение к объекту JavaScript? – Stack Overflow — глубокие обсуждения на тему свойств, JavaScript и объектов на Stack Overflow.
6. Object.defineProperty() – JavaScript | MDN — подробности о создании новых свойств объекта.
7. Опциональные цепочки (?.) – JavaScript | MDN — основы применения оператора опциональной цепочки в JavaScript.