ES6 函数后面的方括号有什么作用？答案

【问题标题】：What do the square brackets after ES6 function do?ES6 函数后面的方括号有什么作用？
【发布时间】：2019-06-12 15:29:08
【问题描述】：

最近我在寻找一种方法来重写一个丑陋的 switch/case 语句，结果遇到了this Medium article。

我将我的 switch/case 重写为一个 es6 函数，如下所示：

const url = category => ({
          'itemA': itemAService.getItemCategories(payload),
          'itemB': itemBService.getItemCategories(payload),
        })[category]

当我用const response = url(category); 之类的东西调用这个函数时，它可以工作，太棒了！但后来我想知道函数末尾的 [category] 到底是什么意思。我想也许它是一个立即调用的函数，但这似乎也不对。

文章提到它是一个对象字面量，但是当我查看 MDN 文档时，我找不到任何解释这是什么或它做什么的东西，甚至找不到任何展示同一事物的示例。

那么它有什么作用呢？

【问题讨论】：

与object[property] 相同。更多信息：MDN.
它只是一个密钥访问器。该函数返回一个对象，所以本质上它只是分配一个对象，然后使用括号表示法来选择传入的对象

标签： javascript ecmascript-6 object-literal

【解决方案1】：

这个简写大致相当于下面的传统函数语法：

function url(category) {
    var obj = {
      'itemA': itemAService.getItemCategories(payload),
      'itemB': itemBService.getItemCategories(payload),
    };
    return obj[category];
}

为对象创建命名变量时，更容易看到发生了什么。

箭头函数中的对象周围需要括号，因为如果箭头函数以 { 开头，则它被视为包含语句的主体，而不是要返回的值。

他们本可以将[category] 直接放在对象字面量之后，而不是放在右括号之后，这样可能更清楚。

【讨论】：

【解决方案2】：

它不是函数“之后”，它是函数体in。也可以写成：

  const url  = category => {
    const obj = {
      'itemA': itemAService.getItemCategories(payload),
      'itemB': itemBService.getItemCategories(payload),
    };

    return obj[category];
 };

所以这基本上只是对象中的动态属性查找。

【讨论】：

嗯，有道理。我想我只是被方括号吓到了，因为我已经习惯了看到 IIFE 函数。感谢您的回答！
JavaScript 的速记符号对于创建令人困惑的语法来说无疑是成熟的。你必须仔细看才能知道这不是某种 IIFE。
@Barmar：查看 AST 会有所帮助，如果有人对此感到满意的话。无耻塞：astexplorer.net.

【解决方案3】：

这里让你感到困惑的是大括号。

假设您有一个对象表达式，并且您对指向该对象的变量使用属性评估器。

obj = {foo: 1, bar: 2}
return obj["foo"];    //returns 1

现在，您将如何调用对象字面量的属性评估器？您需要将它们括起来以完成速记语法。

return {foo: 1, bar: 2}["foo"];    // WRONG Syntax
return ({foo: 1, bar: 2})["foo"];  // CORRECT syntax

因此，您的函数可以使用以下传统语法重写。

function getUrl(category) {

   return ({
          'itemA': itemAService.getItemCategories(payload),
          'itemB': itemBService.getItemCategories(payload),
        })[category]

}

【讨论】：