小编典典

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时,只是在我的假设之外寻找确认或解释。


阅读 253

收藏
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