Javascript добавить элемент в объект

Сентябрь 24, 2017 11:42 дп 726 views | Комментариев нет

Java | Amber

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

Объекты в JavaScript – это автономные элементы, которые можно сравнить с объектами в реальной жизни. Например, книга – это объект, для описания которого можно использовать название, имя автора, количество страниц, жанр и т.п. Точно так же автомобиль можно описать по цвету, модели и мощности. Массивы 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: ƒ}

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

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

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

  • Точечная нотация: .
  • Скобочная нотация:

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

: Индексация, разделение и управление строками в JavaScript

// Retrieve the value of the weapon property
gimli;
«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 = 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: ƒ}

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *