【ES6 教程】第四章 ES6类06—计算属性及其实际应用

• 

• 英文 | https://www.javascripttutorial.net

• 翻译 | 杨小爱

在今天的文章中，我们一起来学习 ES6 中引入的 JavaScript 计算属性。

JavaScript 计算属性简介

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

let propName = 'c';


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


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

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

当你访问对象c属性的rank时，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 并返回全名。

总结

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

学习更多技能

请点击下方公众号