JavaScript 计算属性

摘要:在本教程中，您将学习在 ES6 中引入的 JavaScript 计算属性。

JavaScript 计算属性简介

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

let propName = 'c';

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

console.log(rank.c); // 3
Code language: JavaScript (javascript)

在此示例中，[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);Code language: JavaScript (javascript)

输出

John Doe

工作原理

get[name] 是 Person 类 getter 的计算属性名称。在运行时，当您访问 fullName 属性时，person 对象会调用 getter 并返回全名。

总结

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