Question

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

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

Answer 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']
    }
}

Answer 2

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

＆＃13;

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);

＆＃13;

运行此代码段，并记下两个控制台日志。

如果没有括号，您可以使用字符串"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}

Answer 3

是Computed property (ES2015)：

这是一个示例：

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

您可以使用：

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

数组中变量的含义是属性名吗？

3 个答案:

ECMAScript 5

ECMAScript 6