Меню

Добавление и удаление свойств в объектах Java Script

17.05.2018 - java script, ЯП

Добавление и удаление свойств

//Constructor function
function Circle(radius) {
  this.radius = radius;
  this.draw = function() {
    console.log('draw');
  }
}

const another = new Circle(2);
another.draw();

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

Может возникнуть вопрос, зачем это нужно в реальных проектах.

Представьте что вы работаете с объектом user. Клиент, это может быть веб или мобильное приложение собирается отправить объект user на сервер. На сервере мы получили этот объект и потом мы добавили дополнительные штуки в него. Например, мы можем добавить свойство token, которое генерируется на сервере.

user.token = '2384729f0s8s8f0932';

Мы всегда можем добавить какие то дополнительные данные в уже существующие объекты. Потому что у нас нет классов, нам не нужно определять эти свойства заранее. Мы можем добавить их когда они нужны, и это делает JavaScript очень мощным и облегчает жизнь. В таких языках как C# или Java, каждый раз когда нам нужно реализовать сценарий как вышеописанный, нам нужно вернуться к старту и изменить наш класс. Итак, давайте вернемся и добавим свойство location.

circle.location = {x : 1};
console.log(circle);

И увидим, что это свойство появилось у объекта.

Также у нас есть другая возможность обратиться к свойствам объекта, помимо dot notation. Это скобочная нотация (bracket notation).
В данном случае используются квадратные скобки и строка, с названием свойства.

circle['location'] = {x : 1};

Результат будет тем же, что и при точечной нотации. Как видите dot notation проще и обращении к свойству через нее требует меньше писанины ).

Но bracket notation очень полезен в некоторых сценариях:
Например, когда нам нужно динамически получать свойство объекта.

Например, давайте представим, что у нас есть константа propertyName и установим ей значение location. Теперь мы хотим обратиться к свойству location нашего объекта. Если вы хотите сделать это динамически. Допустим пока мы пишем код, мы не знаем какое будет название свойства. Оно будет получено во время исполнения скрипта. Тогда нам нужно внести переменную в квадратные скобки.

const propertyName = 'location';
circle[propertyName] = {x : 1};

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

Например, представьте, что название свойтва santa-maria. Мы не сможем обратиться к такому свойству через dot notation. Т.е. если у вас в названии свойтсва есть специальные символы или пробелы — используйте bracket notation.

Теперь давайте посмотрим, что нам нужно, чтобы удалить свойство в существующем объекте.
]
Давайте представим что у нас есть объект user из базы данных, и нам нужно вернуть его клиентской части. Но может в этом объекте есть определенные свойства, которые вы не хотите отсылать клиенту. Вы не хотите слать пароль, инфу о кредитке. В таком случаем вам нужно динамически удалить одно или более свойств.

В таком случае воспользуемся оператором delete, после которого укажем имя свойства.
Например

delete circle.location;
delete circle['locationVar'];

Мы можем использовать как dot notation, так и bracket notation

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

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