ES6函数后面的方括号是做什么用的？

Question

最近我正在寻找一种方法来重写一个丑陋的 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 文档时，我找不到任何解释这是什么或它做什么的内容，甚至找不到任何展示相同内容的示例。

那么它有什么作用呢？

Answer 1

它不是 "after" 函数，它是在函数体中。也可以写成：

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

    return obj[category];
 };

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

Answer 2

即shorthand大致等价于以下传统函数语法：

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

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

箭头函数中的对象周围需要括号，因为如果箭头函数以 { 开头，它会被视为包含语句的主体，而不是 return.[=13 的值=]

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

Answer 3

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

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

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

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

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]

}

ES6函数后面的方括号是做什么用的？

What do the square brackets after ES6 function do?

javascript

object-literal

ecmascript-6