javascript - 箭头函数中包裹对象文字的括号是什么意思？

Question

这个问题已经有答案了:

ECMAScript 6 arrow function that returns an object (6 个回答)

What does the arrow function with a () after means? [duplicate] (3 个回答)

ES6 Fat Arrow and Parentheses `(...) => ({...})` [duplicate] (2 个回答)

What does arrow function '() => {}' mean in Javascript? [duplicate] (2 个回答)

已关闭 6 年前。

我见过这样的 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);
}

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

括号中的 { … } 被解释为对象文字，而不是 block 。在 grouping operator , ( … )，其中只能存在表达式。 block 不是表达式，而是对象字面量，因此假定为对象字面量。因此，它将使用以下语法而不是创建 block :

( … ) => expression

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

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

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