ES6粗箭头和括号`（...）=>（{...}）`

小编典典

ES6粗箭头和括号`（...）=>（{...}）`

reactjs

我一直在研究一些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模式机制，但必须将其定义为返回对象而不是简单返回对象的函数。但是令我困惑的部分是花括号周围的括号。

这是要区分对象定义和功能定义吗？是为了读者的缘故？

google搜索发现的唯一类似语法是在airbnb样式指南中，在该指南中似乎是可读性/清晰度。

当我开始尝试使用Graph QL时，只是在我的假设之外寻找确认或解释。

阅读 257

2020-07-22

共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.*/} }
}

因此，父母并不在那里清楚。在这里使用箭头函数的隐式返回功能。

2020-07-22