ES6胖箭头和圆括号（...）=>（{...}）'[重复]

Question

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

在图形QL对象中定义字段时，使用以下语法：

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

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

然而，我假设图形QL模式机制是工作的，这必须被定义为返回对象的函数，而不仅仅是返回对象。但是让我困惑的部分是花括号周围的括号。

这是为了区分对象定义和函数定义吗？是为了清晰起见还是为了读者？

谷歌搜索找到的唯一类似语法是airbnb风格的指南，它似乎是一个可读性/清晰性的东西。

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

Answer 1

这是为了清楚起见，为了编译器和读者。示例中的字段：语法似乎是一个明确的赠品，表明这是一个对象文字，但以下面的代码为例：

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

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

Answer 2

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

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

如果不使用圆括号：（），字段：...语句被视为标签语句，函数返回未定义的。等效的语法是：

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

所以父母不是为了澄清。它适用于使用箭头函数的隐式返回特性。