ES6功能后的方括号有什么作用？

Question

最近，我在寻找一种重写丑陋的switch / case语句的方法，并遇到了这篇Medium文章 。

我将开关/盒重写为如下的es6函数：

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

当我用const response = url(category);函数调用此函数时const response = url(category); 它有效，太好了！ 但是后来我想知道[category]在函数末尾究竟意味着什么。 我以为这可能是立即调用的函数，但这似乎也不对。

文章提到这是一个对象文字，但是当我访问MDN文档时，找不到任何能解释其含义或作用的内容，甚至找不到任何展示此内容的示例。

那怎么办呢？

Answer 1

它不是在函数之后，而是在函数主体中。 它也可以写成：

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

    return obj[category];
 };

因此，这基本上只是对象中的动态属性查找。

Answer 2

该简写大致等于以下传统函数语法：

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

为对象创建命名变量时，更容易看到正在发生的事情。

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

他们本来可以将[category]放在对象文字之后，而不是放在右括号之后，这可能会更加清楚。

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

}