ES6 Fat Arrow和圆括号`(...)=>({...})`

Question

我一直在研究一些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.该匿名函数返回包含字段定义的对象.

我假设图形QL模式机制工作,这必须被定义为返回对象而不是简单对象的函数.但令我困惑的部分是花括号周围的括号.

这是为了区分对象定义和函数定义吗？这是为了清晰的读者的缘故吗？

谷歌搜索发现的唯一类似语法是在airbnb风格指南中,它似乎是一个可读性/清晰度的东西.

只是寻找超出我的假设的确认或解释,因为我开始更多地使用Graph QL.

Answer 1

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

是一个隐式返回对象(文字)的函数.不使用()JavaScript解释器将{}其解释为函数体的包装器而不是对象.

不使用parens : (), 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.*/} }
}

所以父母不清楚.它用于使用箭头函数的隐式返回功能.

Answer 2

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

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

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

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

从本质上讲，你所看到的，与单一属性的对象字面，编译器看到一个函数体（通过打开和关闭大括号，就像一个典型的函数表示）和单个标签的语句，它使用语法label:。由于后面的表达式只是一个文字字符串，并且永远不会返回（甚至不会分配给变量），因此该函数f()实际上什么都不做，其结果是undefined.

但是，通过在“对象文字”周围放置括号，您可以告诉编译器将相同的字符视为表达式而不是一堆语句，因此返回您想要的对象。（请参阅Mozilla 开发网络上的这篇文章，来自评论部分。）

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

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