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]

}