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

Question

我见过 JavaScript 这样的代码：

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

包裹对象的括号 ( … ) 在这种情况下指的是什么？ return 是 shorthand 吗？

Answer 1

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

( … ) => expression

这将隐式地 return 一个表达式，例如：

() => 1 + 1

这个函数会隐含return1 + 1，也就是2。另一个是这样的：

( … ) => { … }

这将创建一个 block 来容纳多个语句，如果你不想隐式 return 一个表达式，并且如果你想做中间计算或不 return根本没有价值。例如：

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

当您想隐式 return 一个对象字面量时，问题就出现了。您不能使用 ( … ) => { … } 因为它会被解释为一个块。解决方案是使用括号。

括号是为了 { … } 被解释为对象文字，而不是块。在grouping operator、( … )中，只能存在表达式。块不是表达式而是对象字面量是，因此假设是对象字面量。因此，它不会创建块，而是使用以下语法：

( … ) => expression

并且隐含地return一个对象字面量。如果没有括号，它将被解释为 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调用时，returns封闭的对象

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

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

What do the parentheses wrapping the object literal in an arrow function mean?