Question

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

我将开关/保护盒重新编写为es6函数，如下所示：

const url = category => ({
          'itemA': itemAService.getItemCategories(payload),
          'itemB': itemBService.getItemCategories(payload),
        })[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]

}

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

3 个答案: