ES6 胖箭头和括号`(...) => ({...})` [重复]答案

【问题标题】：ES6 Fat Arrow and Parentheses `(...) => ({...})` [duplicate]ES6 胖箭头和括号`(...) => ({...})` [重复]
【发布时间】：2017-04-26 19:17:36
【问题描述】：

我一直在研究一些 Graph QL/React/Relay 示例，但遇到了一些奇怪的语法。

在 Graph QL Objects 中定义字段时，使用以下语法：

const xType = new GraphQLObjectType({
  name: 'X',
  description: 'A made up type for example.',
  fields: () => ({
    field: {/*etc.*/}
  })
});

据我所知，这只是定义一个匿名函数并将其分配给 xType.fields。该匿名函数返回包含字段定义的对象。

我假设 Graph QL 模式机制可以正常工作，这必须定义为返回对象的函数，而不是简单的对象。但让我感到困惑的部分是花括号周围的括号。

这是为了区分对象定义和函数定义吗？是为了读者清楚吗？

谷歌搜索发现的唯一类似语法是在 airbnb 样式指南中，它似乎是可读性/清晰性的东西。

当我开始更多地使用 Graph QL 时，只是在寻找超出我假设的确认或解释。

【问题讨论】：

“这是为了区分对象定义和函数定义吗？是为了读者清楚吗？”是的，就是这样。
您可以在重复的问题中或在此MDN article 中获得更多信息。

标签： javascript reactjs ecmascript-6 graphql relay

【解决方案1】：

fields: () => ({
  field: {/*etc.*/}
})

是一个隐式返回对象（字面量）的函数。在不使用 () 的情况下，JavaScript 解释器将 {} 解释为函数体的包装，而不是对象。

不使用括号：()，field: ... 语句将被视为label 语句并且函数返回undefined。等效语法是：

fields: () => { // start of the function body
   // now we have to define an object 
   // and explicitly use the return keyword
   return { field: {/*etc.*/} }
}

所以父母不是为了清楚起见。它用于使用箭头函数的隐式返回功能。

【讨论】：

【解决方案2】：

这是为了编译器和读者的清晰。您示例中的 field: 语法似乎明确表明这是一个对象文字，但以以下代码为例：

let f = () => {
  field: 'value'
}

console.log(f()) //=> undefined

您可能希望这会记录一个将field 设置为'value' 的对象，但它会记录undefined。为什么？

本质上，您所看到的对象字面量具有单个属性，编译器将其视为一个函数体（用大括号表示，就像一个典型的函数）和一个 label statement，它使用语法 @ 987654328@。由于后面的表达式只是一个文字字符串，并且它永远不会返回（甚至不会分配给变量），因此函数 f() 实际上什么都不做，它的结果是 undefined。

但是，通过在“对象文字”周围放置括号，您可以告诉编译器将相同的字符视为一个表达式而不是一堆语句，因此返回您想要的对象。（参见 cmets 部分的 this article on the Mozilla Development Network。）

let g = () => ({
  field: 'value'
})

console.log(g()) //=> { field: 'value' }

【讨论】：