Объекты в JavaScript

Amber

6 лет назад

Объект в JavaScript – это тип данных, который состоит из пар «ключ:значение». Такие пары иногда состоят из свойств (которые могут содержать любой тип данных, включая строки, числа и логические данные) или методов, которые являются функциями, содержащимися внутри объекта.

Объекты в JavaScript – это автономные элементы, которые можно сравнить с объектами в реальной жизни. Например, книга – это объект, для описания которого можно использовать название, имя автора, количество страниц, жанр и т.п. Точно так же автомобиль можно описать по цвету, модели и мощности. Массивы JavaScript также являются объектами.

Читайте также:

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

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

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

Объект в JavaScript – это отдельный тип данных. Как и любой другой тип данных, объект можно присвоить переменной.

В JavaScript есть два метода создания объектов:

Объектный литерал, для которого используются фигурные скобки {}.
Конструктор объекта, который определяется ключевым словом new.

Для примера попробуйте создать пустой объект с помощью этих методов. Сначала попробуйте создать объект через объектный литерал:

// Initialize object literal with curly brackets const objectLiteral = {};

Объектный литерал инициализирует объект фигурными скобками.

Теперь используйте конструктор объекта.

// Initialize object constructor with new Object const objectConstructor = new Object();

Конструктор объектов инициализирует новый объект с помощью new Object().

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

Для примера создайте в переменной gimli объект, описывающий персонажа:

// Initialize gimli object const gimli = { name: "Gimli", race: "dwarf", weapon: "axe", greet: function() { return `Hi, my name is ${this.name}!`; }, };

Объект gimli имеет три свойства. Каждое свойство представлено в виде пары «ключ:значение». К примеру, ключу weapon соответствует значение axe. Также в объекте есть один метод – greet, значение которого представлено содержимым функции.

В методе greet вы можете заметить ключевое слово this. При использовании слова this внутри объекта оно ссылается на текущий объект, в данном случае на gimli.

Введите gimli в консоль, и это выведет весь объект:

gimli; {name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

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

Свойства и методы объектов

У объектов могут быть свойства и методы.

Свойство – это связь между именем (ключом) и значением в объекте. Свойство может содержать любой тип данных. Обычно свойство относится к характеристике объекта.

Метод – это функция, которая является значением свойства объекта и, следовательно, задачей, которую может выполнять объект.

Чтобы быстро понять разницу между свойствами и методами объекта, запомните: свойства выражаются именами существительными, а методы – глаголами. В предыдущем примере использовались свойства name, race и weapon – все они выражены существительными. А, например, fight() или talk() – это глаголы, которые могут использоваться как определение функции метода.

Доступ к свойствам объекта

Доступ к свойствам объекта можно получить двумя способами:

Точечная нотация: .

Скобочная нотация: []

Вернемся к объекту gimli:

const gimli = { name: "Gimli", race: "dwarf", weapon: "axe", greet: function() { return `Hi, my name is ${this.name}!`; }, };

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

// Retrieve the value of the weapon property gimli.weapon; "axe"

Нотация gimli.weapon выводит искомое значение. Также эти данные можно извлечь с помощью скобочной нотации. Этот метод работает аналогично индексации и извлечению строк: чтобы извлечь значение, поместите ключ в квадратные скобки.

// Retrieve the value of the weapon property gimli["weapon"]; "axe"

Методы точечной и скобочной нотации используются регулярно. Точечная нотация – более быстрый и удобочитаемый метод, но он имеет больше ограничений. Скобочная нотация позволяет получить доступ к именам свойств, хранящимся в переменной; этот метод необходимо использовать, если свойство объекта содержит какой-либо специальный символ.

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

gimli.greet();
“Hi, my name is Gimli!”

В приведенном выше примере показано, что при вызове метода greet() возвращается его строковое значение.

Теперь можно попробовать изменить объект.

Добавление и изменение свойств объекта

Чтобы добавить новое свойство в объект, присвойте новое значение с помощью оператора =.

Например, можно добавить в объект gimli новое свойство age, которое будет содержать числовой тип. Для добавления нового свойства объекта можно использовать точечную и скобочную нотацию.

// Add new age property to gimli gimli.age = 139; // Add new age property to gimli gimli["age"] = 139;

Извлечь значение можно также через точечную и скобочную нотацию:

gimli.age; 139

Таким же образом можно добавить в объект новый метод:

// Add new fight method to gimli gimli.fight = function() { return `Gimli attacks with an ${this.weapon}.`; }

Создав новый метод объекта, можно вызвать его:

gimli.fight(); "Gimli attacks with an axe."

Также можно изменить свойство объекта, присвоив новое значение существующему свойству.

// Update weapon from axe to battle axe gimli.weapon = "battle axe";

Чтобы просмотреть все свойства и методы объекта, введите:

gimli; {name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

Оператор присваивания позволяет добавлять и изменять свойства и методы объектов.

Удаление свойств из объекта

Чтобы удалить свойство, используйте ключевое слово delete.

К примеру, попробуйте удалить свойство weapon из объекта gimli:

// Remove weapon from gimli delete gimli.weapon; true

Если свойство было успешно удалено или указанного свойства не существует в объекте, операция оценивается как true.

Убедитесь, что свойство удалено:

gimli; {name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

Теперь попробуйте итерировать свойства объекта.

Итерация свойств объекта

JavaScript предоставляет встроенный тип цикла for, который специально предназначен для итерации свойств объекта. Этот цикл называется for…in.

Ниже приведена упрощенная версия объекта gimli.

const gimli = { name: "Gimli", race: "dwarf", weapon: "battle axe", };

С помощью for…in можно перебрать все свойства gimli и вывести их в консоль. Через скобочную нотацию можно получить значение свойства в качестве переменной, в данном случае key.

// Iterate through properties of gimli for (let key in gimli) { console.log(gimli[key]); } Gimli dwarf battle axe

Можно также извлечь сам ключ свойства. С помощью строкового метода можно преобразовать ключи в верхний регистр:

// Get keys and values of gimli properties for (let key in gimli) { console.log(key.toUpperCase() + ':', gimli[key]); } NAME: Gimli RACE: dwarf WEAPON: battle axe

Цикл for…in не следует путать с циклом for…of, который используется исключительно для типа объекта Array.

Метод Object.keys() возвращает массив ключей объекта:

// Initialize method on gimli object to return property keys Object.keys(gimli); ["name", "race", "weapon"]

Этот метод позволяет работать с ключами объекта в виде массива.

Заключение

Объекты – чрезвычайно полезная часть языка программирования JavaScript. Это один из основных методов написания кода в JavaScript, который позволяет удобным образом организовать связанные данные. Списки дел, корзины покупок, учетные записи пользователей и местоположения на веб-карте – вот лишь несколько примеров объектов JavaScript.

Теперь вы знаете разницу между свойствами и методами объектов, а также умеете добавлять, удалять, изменять и итерировать свойства. Больше об объектах в JavaScript можно узнать здесь.