在本教程中,您将了解 ES6 引入的 JavaScript 计算属性。

JavaScript 计算属性简介

ES6 允许您在 [] 中括号使用表达式。然后它将表达式的结果用作对象的属性名称。例如:

let propName = 'c';

const rank = {
  a: 1,
  b: 2,
  [propName]: 3,
};

console.log(rank.c); // 3

在此示例中,[propName]rank 对象的计算属性。属性名称是 propName 变量的值。

当您访问 rank 对象的 c 属性时,JavaScript 计算 propName 并返回该属性的值。

对象字面量一样,您可以使用计算属性为getter 和 setter。例如:

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 类的 getter 的计算属性名称。在运行时,当您访问fullName属性时,person 对象会调用 getter 并返回全名。

结论

  • 计算属性允许您使用表达式的值作为对象的属性名称。