JavaScript с нуля

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

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

Продолжим с нашего объекта funnyGuy:

let funnyGuy = {};

Предположим, мы хотим добавить свойство firstName и задать ему значение Conan. Добавление свойства в данном случае производится с помощью синтаксиса записи через точку:

funnyGuy.firstName = "Conan";

Вот и все. После добавления свойства мы можем обращаться к нему посредством того же синтаксиса:

let funnyFirstName = funnyGuy.firstName;

Альтернатива записи через точку

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

let funnyGuy = {};

funnyGuy["firstName"] = "Conan";

funnyGuy["lastName"] = "O'Brien";

Какой из этих подходов использовать, решать только вам (или команде), но есть определенные случаи, для которых предназначены именно скобки. Имеются в виду случаи, когда мы работаем со свойствами, чьи имена нам нужно генерировать динамически. В примере же с firstName и lastName мы прописали их статично. Взгляните на следующий фрагмент кода:

let myObject = {};

for (let i = 0; i < 5; i++) {

let propertyName = "data" + i;

myObject[propertyName] = Math.random() * 100;

}

Мы имеем объект myObject — обратите внимание на то, как мы устанавливаем его свойства. У нас нет статичного списка имен свойств, вместо этого мы создаем имя свойства, опираясь на значение индекса массива. Когда мы выясняем имя свойства, то используем эти данные для создания свойства в myObject. Генерируемые именами свойств будут data0, data1, data2, data3 и data4. Эта возможность динамического определения имени свойства в процессе изменения или чтения объекта оказывается доступной благодаря именно скобочному синтаксису.

Теперь, прежде чем продолжить, давайте добавим еще одно свойство, назовем его lastName и присвоим ему значение O’Brien:

funnyGuy.lastName = "O'Brien";

К этому моменту мы уже в хорошей форме, а наш полный код funnyGuy выглядит следующим образом:

let funnyGuy = {};

funnyGuy.firstName = "Conan";

funnyGuy.lastName = "O'Brien";

При его выполнении будет создан объект funnyGuy, и в нем будут определены два свойства — firstName и lastName.

Мы только что рассмотрели, как пошагово создавать объект и устанавливать для него свойства. Если же мы изначально знаем, какие свойства должны быть в объекте, то можем объединить некоторые шаги:

let funnyGuy = {

firstName: "Conan",

lastName: "O'Brien"

};

Конечный результат в таком случае будет идентичен предыдущему, в котором мы сперва создали объект funnyGuy и лишь затем определили в нем свойства.

Есть и еще одна деталь, касающаяся добавления свойств, на которую стоит обратить внимание. К текущему моменту мы рассмотрели различные объекты, имеющие свойства, чьи значения состоят из чисел, строк и т. д. А вы знали, что свойством объекта может являться другой объект? Это вполне возможно! Взгляните на следующий объект colors, чье свойство content содержит объект:

let colors = {

header: "blue",

footer: "gray",

content: {

title: "black",

body: "darkgray",

signature: "light blue"

}

};

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

Допустим, мы хотим добавить свойство frame во вложенный объект content. Сделать мы это можем, например, так:

colors.content.frame = "yellow";

Начинаем с объекта colors, переходим к объекту content, а затем определяем свойство и значение, которые нам нужны. Если же для обращения к свойству content вы предпочтете использовать скобочную нотацию, то сделаете так:

colors["content"]["frame"] = "yellow";

Если вы хотите одновременно использовать оба вида нотации, то это тоже возможно:

colors.content["frame"] = "yellow";

В начале я говорил, что существует ряд способов для добавления свойств объекту. Мы рассмотрели один из них. Более сложный способ задействует методы Object.defineProperty и Object.defineProperties. Эти методы также позволяют вам устанавливать свойство и его значение, но при этом дают и другие возможности. Например, возможность указать, может ли свойство быть пронумеровано или может ли оно быть перенастроено и т. д. Это однозначно выходит за рамки того, что мы будем делать 99 % времени в начале обучения, но если вам это нужно, то упомянутые два метода вполне пригодятся. Документация MDN (https://mdn.dev/) приводит хорошие примеры их использования для добавления одного или нескольких свойств объекту.