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

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

Доступ к свойству объекта с динамическим ключом можно осуществить с помощью нотации квадратных скобок: object[variable].

let propKey = 'dynamicProp';
let obj = { dynamicProp: 'Привет, мир!' };
let propValue = obj[propKey]; // Вернёт 'Привет, мир!'

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

Особенности доступа к свойствам в JavaScript

Ограничения точечной нотации

Точечная нотация — удобный способ обращения к свойствам объекта, однако она не подходит, если имя свойства становится известным только в процессе исполнения программы или включает в себя специальные символы и пробелы. Главный недостаток этого способа — он недостаточно гибкий для работы с динамическими объектами.

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

Возможности нотации скобок

Нотация скобок отлично подходит для динамически меняющихся сценариев. В квадратных скобках вы можете использовать любое выражение, преобразующееся в строку, включая переменные.

let dynamicKey = 'testKey';
let obj = { [dynamicKey]: 'testValue' };
console.log(obj[dynamicKey]); // "Удивительно! Но мы получили 'testValue'!"

Работа с вложенными объектами

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

let familyTree = { depthOne: { depthTwo: { depthThree: 'Мы это сделали!' } } };
let keys = ['depthOne', 'depthTwo', 'depthThree'];
let value = keys.reduce((nestedObj, key) => (nestedObj || {})[key], familyTree); // 'Мы это сделали!'

Не забывайте аккуратно обрабатывать значения undefined, чтобы избежать ошибок TypeError.

Вычисляемые имена свойств в ES6

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

let dynamicProp = 'яблоки';
let fruitBasket = {
  [dynamicProp]: 5
}; // Теперь fruitBasket имеет 5 яблок.

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

Взглянем на магию взаимодействия с объектами в JavaScript:

let key = 'color';
let obj = { color: 'красный' };

obj[key]; // Вернёт 'красный'. Вот как просто!

У нас есть ключ 🔑, и с его помощью мы можем открыть доступ к свойству в сокровищнице объекта (🏴‍☠️):

Замки сундука: [🔓color, 🔒size, 🔒brand]
Ключ: `key` 🔑 = 'color'

Используем нужный ключ 🔑, и получаем доступ к сокровищу (obj[key]).

Более сложные способы доступа к свойствам в JavaScript

Путешествие с циклом for...in

Цикл for...in позволяет проходить по всем перечисляемым свойствам объекта, включая те, что задаются динамически. Важно помнить о применении hasOwnProperty для избежания доступа к унаследованным свойствам.

Изящное деструктурирование

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

let { dynamicProp: alias } = obj;
console.log(alias); // Выведет 'Привет, мир'

Полный список свойств объекта с помощью Object.getOwnPropertyNames()

Метод Object.getOwnPropertyNames() предоставляет полный перечень свойств объекта.

Глобальная область видимости с 'self'

В строгом режиме 'use strict', где this не ссылается на глобальную область видимости, можно использовать self.

self['globalVar'] = 'доступно везде';

Продвигаемся вперёд с for...of и Object.entries

Сочетание for...of и Object.entries() делает процесс прохождения по объекту и его перечисляемым свойствам абсолютно удобным.

for (let [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

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

1. Работа с объектами – JavaScript | MDN — Глубокое погружение в тему объектов в JavaScript.
2. Понимание объектов в JavaScript | DigitalOcean — Детальное объяснение особенностей работы с объектами на примерах.
3. Свойства JavaScript — Урок о доступе и установке свойств в JavaScript.
4. JavaScript – всё о ключевых словах «this» и «new» — Исчерпывающее объяснение использования this и new в JavaScript.
5. Доступ к свойству объекта с динамически вычисляемым именем – Stack Overflow — Значимое обсуждение в сообществе Stack Overflow на тему динамического доступа к свойствам объекта.
6. Структуры данных: Объекты и массивы :: Eloquent JavaScript — Исчерпывающее объяснение работы с объектами в JavaScript.