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 statement，它使用语法label:。由于下面的表达式只是一个文字字符串，并且永远不会返回（甚至分配给变量），函数f()实际上什么也不做，结果是undefined。

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

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

ES6 Fat Arrow和圆括号`（...）=＆gt; （{...}）`

2 个答案: