TOC

Понимание объектов в JavaScript

Вступление

object в JavaScript - этоdata type, состоящий из набораnames илиkeys иvalues, представленных вname:value pairs. Пары имя: значение могут состоять изproperties, которые могут содержать любой тип данных, включая строки, числа и логические значения, а такжеmethods, которые являются функциями, содержащимися в объекте.

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

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

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

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

Объект - этоJavaScript data type, так же как число или строка также являются типом данных. Как тип данных, объект может содержаться в переменной.

Есть два способа построить объект в JavaScript:

  • object literal, в котором используются фигурные скобки:{}

  • object constructor, в котором используется ключевое слово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, у которого есть три свойства. Каждое свойство состоит из парыname:value, также известной как параkey:value. weapon - одно из имен свойств, которое связано со значением свойства"axe", строкой. У него есть один метод с именем методаgreet и значением метода, состоящим из содержимого функции.

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

Отправкаgimli на консоль распечатает весь объект. 

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

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

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

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

Объекты могут иметьproperties иmethods.

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

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

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

gimli.weapon выводит значение свойства, равное"axe". Мы также можем получить те же данные с помощью обозначения скобок объекта. Подобно тому, как вы могли бы использоватьindex and access a string, синтаксис для обозначения скобок - это две квадратные скобки ([]), заключающие имя свойства. 

// 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;
Output139

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

// 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;
Outputtrue

Операция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]);
}
OutputGimli
dwarf
battle axe

Мы также можем получить само имя свойства, используя только первую переменную в циклеfor...in. Мы использовали строковый метод дляconvert the key values to upper case. 

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

Циклfor...in не следует путать с цикломfor...of, который используется исключительно для типа объекта Array. Вы можете узнать больше об итерации массивов в учебном пособии “https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript#looping-through-an-array[Understanding Arrays in JavaScript]”.

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

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

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

Заключение

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

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

Related