Доступ к свойствам

Доступ к свойствам осуществляется к свойствам объекта с использованием точечной нотации или нотации с квадратными скобками.

Попробуйте

const person1 = {};
person1["firstName"] = "Mario";
person1["lastName"] = "Rossi";

console.log(person1.firstName);
// Expected output: "Mario"

const person2 = {
  firstName: "John",
  lastName: "Doe",
};

console.log(person2["lastName"]);
// Expected output: "Doe"

Синтаксис

object.propertyName
object[expression]
object.#privateProperty

Описание

Объект можно рассматривать как ассоциативный массив (также известный как map, dictionary, hash, lookup table). Ключами в этом массиве являются имена свойств объекта.

Существует два способа доступа к свойствам: точечная нотация и нотация с квадратными скобками.

Точечная нотация

В синтаксисе object.propertyName, propertyName должен быть допустимым идентификатором JavaScript, которым также может быть зарезервированное слово. Например, object.$1 является допустимым, а object.1 — нет.

const variable = object.propertyName;
object.propertyName = value;

const object = {};
object.$1 = "foo";
console.log(object.$1); // 'foo'

const object = {};
object.1 = "bar"; // SyntaxError
console.log(object.1); // SyntaxError

Здесь метод с именем createElement извлекается из document и вызывается.

document.createElement("pre");

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

77 .toExponential();
// or
77
.toExponential();
// or
(77).toExponential();
// or
77..toExponential();
// or
77.0.toExponential();
// because 77. === 77.0, no ambiguity

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

Нотация с квадратными скобками

В синтаксисе object[expression], expression должен вычисляться в строку или Symbol, представляющий имя свойства. Таким образом, это может быть любой строковый литерал, например, включая '1foo', '!bar!' или даже ' ' (пробел).

const variable = object[propertyName];
object[propertyName] = value;

Это делает то же самое, что и предыдущий пример.

document["createElement"]("pre");

Пробел перед нотацией с квадратными скобками допускается.

document ["createElement"]("pre");

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

const key = "name";
const getKey = () => "name";
const Obj = { name: "Michel" };

Obj["name"]; // returns "Michel"
Obj[key]; // evaluates to Obj["name"], and returns "Michel"
Obj[getKey()]; // evaluates to Obj["name"], and returns "Michel"

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

Имена свойств

Каждое имя свойства — это строка или Symbol. Любое другое значение, включая число, приводится к строке. Это выводит 'value', поскольку 1 приводится к '1'.

const object = {};
object["1"] = "value";
console.log(object[1]);

Это также выводит 'value', поскольку и foo, и bar преобразуются в одну и ту же строку ("[object Object]").

const foo = { uniqueProp: 1 };
const bar = { uniqueProp: 2 };
const object = {};
object[foo] = "value";
console.log(object[bar]);

Привязка методов

Обычно при обсуждении свойств объекта проводится различие между свойствами и методами. Однако различие между свойством и методом — это не более чем соглашение. Метод — это свойство, которое можно вызвать (например, если оно имеет ссылку на экземпляр Function в качестве своего значения).

Метод не привязан к объекту, свойством которого он является. В частности, this не фиксирован в методе и не обязательно ссылается на объект, содержащий метод. Вместо этого this "передается" при вызове функции. См. справку по this.

Примеры

Нотация с квадратными скобками против eval()

Новички JavaScript часто ошибочно используют eval(), где вместо этого можно использовать нотацию с квадратными скобками.

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

const x = eval(`document.forms.form_name.elements.${strFormControl}.value`);

eval() медленный и должен избегаться, когда это возможно. Кроме того, strFormControl должен содержать идентификатор, что не требуется для имен и id элементов формы. Лучше использовать нотацию с квадратными скобками:

const x = document.forms.form_name.elements[strFormControl].value;

Спецификации

Совместимость с браузерами

См. также

• Object
• Object.defineProperty()
• Optional chaining (?.)