Объекты JavaScript

Введение в объекты JavaScript

В JavaScript объекты являются фундаментальными элементами, которые помогают организовывать и хранить данные. Представьте объект JavaScript как специальный ящик, в котором можно хранить различные предметы. Каждый предмет внутри этого ящика лежит в маленьком отделении с меткой (мы называем её именем свойства), а сам предмет является значением. В отличие от примитивных типов данных (таких как числа и строки), object — это ссылочный тип, который может объединять множество связанных значений. Например, если ящик представляет книгу, в нём могут быть отделения с метками «title», «author» и «number of pages», каждое из которых содержит соответствующую информацию о книге.

Создание объектов

Использование литерала object

Это простой способ, при котором вы напрямую определяете object и его свойства с помощью фигурных скобок {}:

В этом примере user — это object с двумя свойствами: name и age. Вы сразу видите, что содержит object, что делает этот метод очень прозрачным и удобным в использовании.

Использование синтаксиса new Object()

Кроме того, можно начать с пустого object и затем добавлять свойства по одному:

Этот метод предполагает сначала создание пустого object (user), а затем добавление свойств (name и age). Он полезен, когда свойства object зависят от условной логики или определяются во время выполнения программы.

Краткая запись свойств и методов

Когда имя переменной совпадает с нужным именем свойства, можно избежать повторения с помощью краткой записи значения свойства. У методов тоже есть более короткий синтаксис — можно опустить часть : function:

name равнозначно записи name: name, а greet() {} равнозначно greet: function() {}. Оба варианта делают литералы object лаконичнее.

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

Имена свойств не обязательно задавать жёстко в коде. Заключив выражение в квадратные скобки [...] внутри литерала, можно вычислить ключ во время выполнения:

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

Вложенные объекты

Значением свойства может быть другой object, что позволяет моделировать структурированные иерархические данные. Доступ к вложенным значениям осуществляется путём цепочки точечной или скобочной нотации:

Каждый уровень — это просто очередной object, поэтому одни и те же правила доступа применяются на всю глубину.

Почему объекты важны?

Теперь, когда мы познакомились с объектами JavaScript, вы можете задаться вопросом об их практической значимости. Давайте разберём, почему владение объектами JavaScript необходимо для тех, кто начинает путь в веб-разработке.

1. Организация: Объекты помогают хранить связанные данные вместе, делая код чище и понятнее. Вместо множества отдельных переменных можно сгруппировать связанные данные в единый object.

Этот object book аккуратно объединяет всю информацию о книге под одной переменной.

2. Повторное использование: Созданный object можно многократно использовать в коде. Это упрощает работу с общими данными и функциональностью.

Object user можно передавать в разные функции, например в displayUserInfo, без необходимости переопределять информацию о пользователе.

3. Гибкость: Объекты в JavaScript очень гибки. При необходимости можно добавлять новые свойства, изменять значения существующих или удалять свойства.

4. Функциональность: Объекты также могут содержать функции. Эти функции (известные как методы) могут выполнять действия с данными, хранящимися в object.

Object person имеет метод greeting, который использует собственные данные для формирования приветствия. Возможно, вам интересно ключевое слово this в этом примере — подробнее о нём можно узнать в нашей статье о ключевом слове this в JavaScript.

5. Прототипы: Каждый object в JavaScript имеет прототип. Прототип — это объект-шаблон, от которого object наследует методы и свойства. Это открывает возможности для мощных моделей наследования.

Здесь dog наследует от animal, поэтому имеет доступ к свойству isAlive, определённому в animal, а также к собственному методу bark.

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

Объекты позволяют получать доступ к своим свойствам и изменять их с помощью точечной или скобочной нотации.

Доступ к свойствам

user.name обращается к свойству name с помощью точечной нотации — она понятна и легко читается. user["age"] использует скобочную нотацию, которая удобна, когда имя свойства хранится в переменной или не является допустимым идентификатором.

Также можно получить все ключи или значения object с помощью Object.keys() и Object.values():

Эти методы полезны для перебора свойств object или их преобразования в массивы. Подробнее об извлечении данных, включая Object.entries(), см. в разделе Object.keys, values, entries.

Проверка наличия свойства

Чтобы проверить, существует ли свойство, используйте оператор in. Он надёжнее, чем сравнение с undefined, поскольку свойство может законно содержать значение undefined:

Оператор in возвращает true всякий раз, когда ключ присутствует, даже если его значение равно undefined. Проверка === undefined не может отличить отсутствующее свойство от свойства, явно установленного в undefined.

Изменение свойств

Также можно изменять свойства object или добавлять новые:

В примере показаны добавление нового boolean-свойства (isAdmin), изменение значения существующего свойства (name) и удаление свойства (age). Это демонстрирует изменяемую природу объектов JavaScript.

Let и Const с объектами

Let

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

Const

С const можно изменять свойства object, но нельзя присваивать переменной новый object. Это гарантирует, что ссылка на object остаётся неизменной.

Деструктуризация object и оператор rest

Деструктуризация

Деструктуризация позволяет извлекать свойства из object в отдельные переменные:

Этот синтаксис извлекает свойства firstName, lastName и age из object person в отдельные переменные, упрощая доступ к ним.

Оператор rest

Оператор rest (...) используется для сбора оставшихся свойств, которые не были извлечены:

После извлечения age оператор rest собирает оставшиеся свойства в новый object nameDetails, который включает только firstName и lastName.

Расширенные атрибуты свойств и методы

Геттеры и сеттеры

Геттеры и сеттеры — это функции, которые управляют тем, как вы получаете доступ к свойствам object и устанавливаете их значения:

Свойство fullName управляется геттером и сеттером. Геттер возвращает полное имя, объединяя firstName и lastName. Сеттер принимает полное имя, разбивает его на две части и присваивает их firstName и lastName соответственно.

Помимо геттеров и сеттеров, каждое свойство также имеет скрытые атрибуты, такие как writable, enumerable и configurable. Чтобы узнать, как их проверять и настраивать, см. раздел Флаги и дескрипторы свойств.

Заключение

Объекты JavaScript обеспечивают структурированный, эффективный и мощный способ управления данными и работы с ними, что необходимо для создания интерактивных и динамических веб-приложений. Понимание того, как эффективно использовать объекты, крайне важно для всех, кто стремится повысить свои навыки JavaScript.

Практика