看起来像Array函数的JavaScript语法：[variable]（{key}，arg）{}

Question

我被要求研究雇主的代码，在代码中，雇主做了这样的事情：

export const actions = {
  [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {
    const type = payload

现在，在这里，我无法纠正这一行代码

 [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {

喜欢它是一个功能还是什么？ 有人能解释一下上面的语法吗？

Answer 1

New-ish JavaScript允许对象文字表达式中的属性名称（ { }阻止初始化actions被调用）通过允许[ ]获取属性名称而不是过去的标识符或字符串常量来计算表达式中的属性名称。

那么这意味着应该评估ACTIONS.ITEM_LIST.LOAD.name ，并将最终结果的字符串值用作对象的函数属性的名称。 （这也是该语言的新功能;以前的属性必须是name : value严格限定name : value ）。

现在在该函数的形式参数列表中， {commit}是一个解构形式参数。 这意味着函数期望第一个参数是一个对象，因此在函数内部，参数（变量） commit应绑定到该对象的“commit”属性的值（如果没有这样的属性，则为undefined ）。

因此，如果我们假设ACTIONS.ITEM_LIST.LOAD.name计算结果为字符串“xyz”，则可以调用：

var result = actions.xyz({ foo: "bar", commit: "everything" }, somePayload);

在函数中，字符串“everything”将是commit参数的值。

Answer 2

它使用对象方法语法结合计算属性名称和参数列表中的解构 。

ACTIONS.ITEM_LIST.LOAD可能会计算到一个对象：访问对象的.name属性可能会计算为一个字符串。 例如，如果字符串是“foo”，则那里的行相当于：

const actions = {
  'foo': function(arg1, payload) {
    let commit = arg1.commit; // using "let" because parameters can be reassigned
    const type = payload
    // ...
};
export actions;

（从技术上讲，它并不完全等效 ，但它几乎是 - 对象方法不能用作构造函数。）

Answer 3

[ACTIONS.ITEM_LIST.LOAD.name]（{commit}，payload）{

将解析函数声明语法：

functionName（arguments）{statements}

这里有几件事情在起作用。 首先， 行动是一个对象。 接下来，它使用新的计算属性名称语法。 即[ACTIONS.ITEM_LIST.LOAD.name]将提供我们语法的functionName部分。 注意，这不是一个数组，它是一个计算属性 ，也是我们的动作字典的一个关键。 最后，它使用速记方法名称语法在对象操作中创建函数，而不将其写为“key：value”表示法。 这也是ECMAScript2015中的新功能。

此链接在这里会给你明确的想法，如果我不清除所有的疑虑。