在箭头函数中包含对象文字的括号是什么意思？

Question

我见过这样的JavaScript代码：

let a = () => ({ id: 'abc', name: 'xyz' })

在这个例子中，包装对象的括号( … )引用了什么？它是return的缩写吗？

Answer 1

没有。那些括号生成一个对象文字。 Arrow functions有许多语法，其中一种是：

( … ) => expression

这将隐式返回一个表达式，例如：

() => 1 + 1

此函数将隐式返回1 + 1，即2。另一个是：

( … ) => { … }

如果您不想隐式返回表达式，并且想要进行中间计算或根本不返回值，这将创建一个block来容纳多个语句。例如：

() => {
  const user = getUserFromDatabase();
  console.log(user.firstName, user.lastName);
}

当您想要隐式返回对象文字时，会出现问题。您无法使用( … ) => { … }，因为它会被解释为块。解决方案是使用括号。

括号用于将{ … }解释为对象文字，而不是块。在grouping operator，( … )中，只有表达式可以存在于其中。块不是表达式，但是对象文字是，因此假设是对象文字。因此，它将使用以下语法而不是创建块：

( … ) => expression

隐式返回一个对象文字。如果没有括号，它将被解释为labels和字符串，而不是对象文字的键和值。

let a = () => { 
  id: 'abc', //interpreted as label with string then comma operator
  name: 'xyz' // interpreted as label (throws syntax error)
}

此处的逗号将被解释为comma operator，并且由于操作数必须是表达式，而标签是语句，因此会引发语法错误。

Answer 2

它允许您创建表达式，所以

let a = () => ({ id: 'abc', name: 'xyz' })

指定调用a时返回包含的对象

如果在这种情况下删除()，它将抛出一个错误，因为它不是一个有效的函数体语句，因为{}中的let a = () => { id: 'abc', name: 'xyz' }被解释为边界声明，但如果你看一下，里面的内容是无效的。

let a = () => {
    id: 'abc',    /* Not valid JS syntax */
    name: 'xyz'
}