ES6 计算属性名快速上手

1. ES6 计算属性名

ES6 中引入了计算属性名，英文是 computed property names，它可以在对象字面量中动态计算属性名称。

我们知道添加或修改对象的属性有两种常用的方法，一种是使用 . 语法，另外还可以使用 [] 传入一个结果为字符串的表达式。

• 使用 . 添加或修改属性

const person = {}
person.name = '钢铁侠'
person.name = '美国队长'

• 使用 [] 添加或修改属性

const person = {}
person['name'] = '钢铁侠'
str = 'name'
person[str] = '美国队长'

但是在对象字面量语法中，不管属性名加不加引号，它都会被当成一个字符串，没有办法动态生成属性名。

下面的例子中，我们尝试用 name 变量设置 person 对象字面量的属性名称，结果最终的属性名称还是 'name'，而不是 '名字'。

let name = '名字'
const person = {
  name: '钢铁侠'
}
console.log(person)
// Object { name: "钢铁侠" }

借助 ES6 的计算属性名，就可以在对象字面量中动态生成属性名称，它的语法是在方括号内放一个表达式 [表达式]。

let name = '名字'
const person = {
  [name]: '钢铁侠'
}
console.log(person)
// Object { "名字": "钢铁侠" }

---

2. 参考资料

• Computed property names
• 属性名表达式

---

3. 欢迎关注