Resumo : neste tutorial, você aprenderá sobre as propriedades computadas do JavaScript introduzidas no ES6.
Introdução à propriedade computada em JavaScript
ES6 permite usar uma expressão entre colchetes []
. Em seguida, usará o resultado da expressão como o nome da propriedade de um objeto. Por exemplo:
let propName = 'c';
const rank = {
a: 1,
b: 2,
[propName]: 3,
};
console.log(rank.c); // 3
Linguagem de código: JavaScript ( javascript )
Neste exemplo, the [propName]
é uma propriedade computada do rank
objeto. O nome da propriedade é derivado do valor da propName
variável.
Ao acessar c
a propriedade do rank
objeto, o JavaScript avalia propName
e retorna o valor da propriedade.
Assim como um objeto literal , você pode usar propriedades computadas para getters e setters de uma classe . Por exemplo:
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);
Linguagem de código: JavaScript ( javascript )
Saída:
John Doe
Como funciona:
The get[name]
é um nome de propriedade computado de um getter da Person
classe. Em tempo de execução, ao acessar a fullName
propriedade, o objeto person chama o getter e retorna o nome completo.
Resumo
- As propriedades computadas permitem usar os valores das expressões como nomes de propriedades de um objeto.