ES6 粗箭头和括号`(...) => ({...})`

Question

我一直在研究一些 Graph QL/React/Relay 示例，并且我运行研究了一些 st运行ge 语法。

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

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

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

我假设 Graph QL 模式机制可以正常工作，这必须定义为返回对象的函数，而不仅仅是一个对象。但让我感到困惑的部分是花括号周围的括号。

这是为了区分对象定义和函数定义吗？是为了 reader 清楚起见吗？

google 搜索发现的唯一相似语法是在 airbnb 风格指南中，它似乎是 readability/clarity 的东西。

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

Answer 1

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

是一个隐式 returns 和 object（字面量）的函数。不使用 () JavaScript 解释器将 {} 解释为函数体的包装器而不是 object.

不使用 parens: ()，field: ... 语句被视为 label 语句和函数 returns undefined。等效语法是：

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

所以 parents 为了清楚起见不在那里。它用于使用箭头函数的 implicit-returning 特性。

Answer 2

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

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

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

您可能希望这会记录 field 设置为 'value' 的对象，但它会记录 undefined。为什么？

本质上，您将对象文字视为具有单个属性的对象文字，编译器将其视为一个函数体（由打开和关闭大括号表示，就像典型的函数一样）和单个 label statement，它使用语法 label:。由于后面的表达式只是一个文字字符串，它永远不会返回（甚至不会分配给一个变量），函数 f() 实际上什么都不做，它的结果是 undefined.

但是，通过在您的 "object literal," 两边放置括号，您告诉编译器将相同的字符视为一个表达式而不是一堆语句，因此返回您想要的对象。（参见 this article on the Mozilla Development Network，来自评论部分。）

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

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

ES6 粗箭头和括号`(...) => ({...})`

ES6 Fat Arrow and Parentheses `(...) => ({...})`

javascript

relay

ecmascript-6

reactjs

graphql