Средства доступа к свойствам

Существует два способа установки, изменения и доступа к свойствам объекта: обозначение через точку и обозначение в скобках .

Точечное обозначение

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

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

Вы можете использовать точечную нотацию для доступа, изменения или создания новых свойств с помощью операторов присваивания :

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

Объединение ключей свойств в цепочку с использованием точечной записи позволяет получить доступ к свойствам объектов, которые сами являются свойствами объекта:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

Однако использование этого синтаксиса, когда ключ, указанный в цепочке, может не быть определен, может привести к ошибкам. В следующем примере myMissingProp не является свойством объекта myObj , поэтому попытка получить доступ к myObj.myMissingProp приводит к undefined . Попытка затем получить доступ к свойству undefined , как если бы это был объект, приводит к ошибке:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

> myObj.myMissingProp
> undefined

myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined

Чтобы решить эту проблему, в ES2020 введен «необязательный оператор цепочки» ( ?. ) для безопасного доступа к вложенным свойствам объектов.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

Ключи, доступ к которым осуществляется с использованием точечной записи, не заключаются в кавычки, как строковые литералы. Это означает, что вы можете использовать точечную нотацию для доступа только к ключам свойств, которые являются действительными идентификаторами :

const myObj = {
    "1": true,
    "key with spaces": true
};

myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal

myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'

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

Обозначение в скобках

В обозначении скобок используется набор скобок ( [] ), содержащий значение, которое оценивает строку (или символ ), представляющую ключ свойства.

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

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

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

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

const colors = {
    "color1" : "red",
    "color2" : "blue",
    "color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );

colors[ "color" + randomNumber ];
> "blue"

Как и в случае с точечной записью, вы можете использовать скобочную запись как для доступа, так и для создания новых свойств, используя операторы присваивания :

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }