Доступ к свойству объекта по имени в JavaScript: функция

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

Для динамического обращения к свойствам объекта по строковому имени вы можете использовать скобочную нотацию object["property"]:

let obj = {a: 1, b: 2};
console.log(obj["a"]); // Получаем 1.

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

Резервный метод чтения свойств read_prop

Когда мы сталкиваемся с проблемой неопределённых свойств, требуется поиск более грациозного синтаксиса. В этом может помочь функция read_prop:

function read_prop(obj, prop) {
    return prop.split('.').reduce((o, key) => (o && o[key] !== undefined) ? o[key] : undefined, obj);
}

Она упрощает работу с вложенными свойствами и предотвращает появление ошибок при обращении к неопределённым свойствам, используя строку с точечной нотацией.

Управление переменными свойствами

JavaScript всегда полон неожиданностей. Вот некоторые важные моменты, которые следует учесть:

1. Использование переменных и результатов функций: Забудьте о жёсткой привязке – используйте переменные или результаты функций для передачи имен свойств в динамическом режиме.

   JS

   Скопировать код

    let propertyName = 'b';
    console.log(obj[propertyName]); // Выводим значение свойства b, равное 2.

   Запустить код

2. Работа с неопределёнными свойствами: Если свойства нет, результатом обращения к нему будет undefined.

   JS

   Скопировать код

    console.log(obj["c"]); // Свойства c нет в объекте, получаем undefined.

   Запустить код

3. Работа с вложенными свойствами: Используйте последовательность скобок для обращения к свойствам внутри вложенных объектов.

   JS

   Скопировать код

    let nestedObj = {a: {b: {c: 3}}};
    console.log(nestedObj["a"]["b"]["c"]); // Значение свойства c равно 3.

   Запустить код

4. Проверка наличия свойства: Если имя свойства приходит из внешнего источника, всегда проведите валидацию данных, чтобы избежать возможных проблем.

5. Реагирование на события: Использование обработчиков событий с динамическим доступом к свойствам делает интерфейс полностью интерактивным.

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

Представим библиотеку с полкой, на которой расставлены книги:

Полка: [📗(название), 📙(автор), 📘(год издания), 📕(жанр)]

У вас есть записка со словом 'год издания', и вам требуется найти соответствующую книгу.

let library = {
  'title': 'JavaScript: The Good Parts',
  'author': 'Douglas Crockford',
  'year': 2008,
  'genre': 'Programming'
};

let propertyName = 'year';

Применив эту записку в качестве ключа:

console.log(library[propertyName]); // Находим книгу, изданную в 2008 году.

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

Улучшенный подход к обращению к свойствам

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

• Доступ к массивам: Если свойство содержит массив, используйте скобочную нотацию для доступа к его элементам.

  JS

  Скопировать код

    let objWithArray = {data: [1, 2, 3]};
    console.log(objWithArray["data"][1]); // Достаём второй элемент массива, который равен 2.

  Запустить код

• Динамическое создание свойств: Шаблонные строки могут чудесно помочь в динамическом формировании имен свойств.

  JS

  Скопировать код

    let dynamicPropName = `property_${2}`;
    let objDynamic = {[dynamicPropName]: 'value'};
    console.log(objDynamic[dynamicPropName]); // Обращаемся к свойству с динамическим именем, его значение: "value".

  Запустить код

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

Продвигаясь через штормовой код: модели и лучшие практики

Следование шаблонам и использование лучших практик помогают достичь вершин мастерства:

• Консистентность: Выберите стиль обращения к свойствам и усердно следуйте ему в своём проекте.
• Защита от изменений (иммутабельность свойств): Обозначьте свойства объектов как неизменяемые там, где это необходимо для уменьшения сложности.
• Производительность: Если вы часто обращаетесь к одним и тем же свойствам, сохраните их значения в переменной, чтобы минимизировать обращения к объекту.

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

1. Работа с объектами – JavaScript | MDN – полное руководство по работе с объектами в JavaScript и доступу к их свойствам.
2. JavaScript Objects – обучающий курс W3Schools по объектам языка JavaScript, в том числе по доступу к свойствам.
3. javascript – Как обрабатывать вложенные объекты, массивы или JSON? – Stack Overflow – решения сообщества разработчиков для работы с вложенными структурами данных.
4. Дескрипторы свойств и флаги – подробное изучение дескрипторов свойств и флагов в JavaScript.
5. Как использовать деструктуризацию объектов в JavaScript – пошаговое руководство по деструктуризации объектов в ES6.
6. Шаблонные литералы – категорически лучше строк – о преимуществах и использовании шаблонных литералов.
7. Метапрограммирование с прокси в ECMAScript 6 – статья доктора Акселя Раушмайера о метапрограммировании с использованием прокси в ES6.