数组中变量作为属性名称的含义？答案

【问题标题】：Meaning of variable in array as property name?数组中变量作为属性名称的含义？
【发布时间】：2017-08-18 17:56:47
【问题描述】：

var expertise = 'journalism'
var person = {
    name: 'Sharon',
    age: 27,
    [expertise]: {
        years: 5,
        interests: ['international', 'politics', 'internet']
    }
}

在这个表达式中，为什么我们将括号中的[expertise] 视为属性名称？需要放什么括号？

【问题讨论】：

标签： javascript

【解决方案1】：

是语法糖，在ECMAScript 6中介绍

Computed property names

从 ECMAScript 2015 开始，对象初始值设定项语法也支持计算属性名称。这允许您将表达式放在括号 [] 中，该表达式将被计算为属性名称。这与属性访问器语法的括号表示法是对称的，您可能已经使用它来读取和设置属性。

ECMAScript 5

var expertise = 'journalism'
var person = {
    name: 'Sharon',
    age: 27
}
person[expertise] = {
    years: 5,
    interests: ['international', 'politics', 'internet']
}

ECMAScript 6

var expertise = 'journalism'
var person = {
    name: 'Sharon',
    age: 27,
    [expertise]: {
        years: 5,
        interests: ['international', 'politics', 'internet']
    }
}

【讨论】：

【解决方案2】：

这样，您就可以引用expertise变量中存储的字符串值，即journalism。

var expertise = 'journalism'
var person = {
name: 'Sharon',
age: 27,
[expertise]: {
years: 5,
interests: ['international', 'politics', 'internet']
}
}

console.log(person.journalism.years);
console.log(person[expertise].years);

运行这段代码 sn-p，并记下两个控制台日志。

如果没有括号，您将使用字符串 "expertise" 作为属性名称。

您可以在MDN 上阅读更多相关信息。

计算属性名称

从 ECMAScript 2015 开始，对象初始化器语法还支持计算属性名称。这允许您将表达式放在括号 [] 中，该表达式将被计算为属性名称。这是对称的括号符号属性访问器语法，您可能已经使用它来读取和设置属性已经。现在您可以在对象中使用相同的语法文字也是如此

var param = 'size';
var config = {
  [param]: 12,
  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // {size: 12, mobileSize: 4}

【讨论】：

【解决方案3】：

是Computed property (ES2015)：

这是一个示例：

var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};

你可以使用：

console.log(o.foo)  // hey
console.log(o.bar)  // there

【讨论】：