В этом руководстве вы узнаете о вычисляемых свойствах JavaScript, представленных в ES6.
ES6 позволяет использовать выражение в квадратных скобках []
. Затем он будет использовать результат выражения в качестве имени свойства объекта. Например:
let propName = 'c'; const rank = { a: 1, b: 2, [propName] : 3, }; console.log(rank.c); // 3
В этом примере [propName]
— это вычисляемое свойство объекта rank
. Имя свойства получается из значения переменной propName
.
Когда вы обращаетесь к свойству c
объекта rank
, JavaScript оценивает propName
и возвращает значение свойства.
Как и литерал объекта, вы можете использовать вычисляемые свойства для геттеров и сеттеров класса. Например:
let name = 'fullName'; class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } get[name]() { return`$ { this.firstName } $ { this.lastName }`; } } let person = new Person('John', 'Doe'); console.log(person.fullName);
Выход:
John Doe
Как это работает:
get[name]
— это имя вычисляемого свойства геттера класса Person
. Во время выполнения, когда вы обращаетесь к свойству fullName
, объект person вызывает метод получения и возвращает полное имя.