JavaScript ES6 对象

Question

这个问题已经有答案了:

What do square brackets around a property name in an object literal mean? (2 个回答)

已关闭 6 年前。

我在互联网上看到了代码:

const SIGNIN_USER = 'SIGNIN_USER';
const SIGNUP_USER = 'SIGNUP_USER';
const ACTION_HANDLERS = {
  [SIGNIN_USER]: (para1) => { return para1; },
  [SIGNUP_USER]: (para2) => { return para2;},
}

// Using ACTION_HANDLERS object:
const handler = ACTION_HANDLERS[para3];
return handler ? handler(para3) : "Frist Time";

我了解ACTION_HANDLERS是一个对象。但我不明白什么[SIGNIN_USER], [SIGNUP_USER], ACTION_HANDLERS[para3]意思是这里？？？.

我试过Babel翻译成ES5，但我根本不明白。

我也不知道要搜索的关键字。谁能帮我吗？

Answer 1

ES6 中的对象支持计算属性键名称。

const myKey = 'baz';
const someObjWithRandomValues = {
  ['foo']: someValue,
  [myKey]: otherValue,
  ['rab'.reverse()]: anotherValue
};

// This is the same as
const someObjWithRandomValues = {
  foo: someValue,
  baz: otherValue
  bar: anotherValue
};

对方括号中的表达式进行求值，该表达式将成为属性的名称。

const someObj = {
  [someExpression]: someValue
};

与

是一样的

const someObj = {};
someObj[someExpression] = someValue;

至于 ACTION_HANDLERS[para3]，这只是访问带有方括号的属性，并且这是 Javascript 长期以来的一个功能。

const para3 = 'foo';
myObj[para3]();
// Same thing as:
myObj.foo();