Поиск по сайту:

Понимание объектов в 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;

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

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

Далее мы рассмотрим свойства и методы объекта JavaScript.

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

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

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

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

Простой способ запомнить разницу между свойствами объекта и методами — думать о свойстве как о существительном, а о методе — как о глаголе. имя, раса и оружие — все это существительные, связанные с объектом и свойствами. 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;

Output
"axe"

gimli.weapon выводит значение свойства, которое равно топору. Мы также можем получить те же данные с помощью нотации объектной скобки. Подобно тому, как вы могли бы индексировать строку и обращаться к ней, синтаксис записи в квадратных скобках представляет собой две квадратные скобки ([]), заключающие в себе имя свойства.

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

Output
"axe"

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

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

gimli.greet();

Output
"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;

Output
139

Метод также может быть добавлен к объекту с помощью того же процесса.

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

После того, как мы создали этот новый объектный метод, мы можем вызвать его, как мы делали выше.

gimli.fight();

Output
"Gimli attacks with an axe."

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

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

В этот момент, если мы вызовем объект, мы увидим все наши дополнения и модификации.

gimli;

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

С помощью операции присваивания мы можем изменить свойства и методы объекта JavaScript.

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

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

В приведенном ниже примере мы удалим свойство weapon из gimli с помощью delete.

// Remove weapon from gimli
delete gimli.weapon;

Output
true

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

Мы можем проверить вывод gimli, чтобы убедиться, что все получилось.

gimli;

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

В приведенном выше выводе имя weapon и связанное с ним значение больше не доступны, что показывает, что мы успешно удалили свойство.

В следующем разделе мы рассмотрим способы перебора объектов в JavaScript.

Перебор свойств объекта

В 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]);
}

Output
Gimli
dwarf
battle axe

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

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}

Output
NAME: Gimli
RACE: dwarf
WEAPON: battle axe

Цикл for...in не следует путать с циклом for...of, который используется исключительно для типа объекта Array. Вы можете узнать больше об итерации по массивам в учебнике «Понимание массивов в JavaScript».

Еще одним полезным методом перечисления является метод Object.keys(), который возвращает массив ключей объекта.

// Initialize method on gimli object to return property keys
Object.keys(gimli);

Output
["name", "race", "weapon"]

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

Заключение

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

В этом руководстве мы узнали разницу между свойствами и методами, как создавать объекты и как добавлять, удалять, изменять и циклически перебирать свойства объекта. Чтобы узнать больше об объектах JavaScript, прочтите статью «Работа с объектами в сети разработчиков Mozilla».