ES6的计算属性名语法

为什么要用[ ]去包裹变量

计算属性名

在JavaScript中，我们定义属性时，有两种方式：中括号[]或.的方式：

// 方法一
obj.foo = true;

// 方法二
obj['a'+'bc'] = 123;

.运算符具有很大的局限性，比如first name这种属性只能通过中括号的方式来定义。中括号的方式允许我们使用变量或者在使用标识符时会导致语法错误的字符串直接量来定义属性。例如：

var person = {},
    lastName = "last name";

person["first name"] = "Nicholas";
person[lastName] = "Zakas";

console.log(person["first name"]);      // "Nicholas"
console.log(person[lastName]);          // "Zakas"

这两种方式只能通过中括号的方式来定义的。在ES5中，你可以在对象直接量中使用字符串直接量作为属性，例如：

var person = {
    "first name": "Nicholas"
};

console.log(person["first name"]);      // "Nicholas"

但是当我们的属性名存在一个变量中或者需要计算时，使用对象直接量是无法定义属性的。但是在ES6中计算属性名语法，同样是通过中括号的方式。例如：

var lastName = "last name";

var person = {
    "first name": "Nicholas",
    [lastName]: "Zakas"
};

console.log(person["first name"]);      // "Nicholas"
console.log(person[lastName]);          // "Zakas"

在对象直接量中的中括号表明属性名是需要被计算的，它的内容被计算为字符串