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

Question

我看到过这样的 JavaScript 代码：

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

在这个例子中，将对象包裹在括号( … )中是指什么？它是否是return的简写？

返回结果:

在这个例子中，将对象包裹在括号( … )中是指什么？它是否是return的简写？

- Stanley

---

如果没有在 { id: 'abc', name: 'xyz' } 周围加上 ()，将会抛出语法错误。({ id: 'abc', name: 'xyz' }) 是一个表达式。 - guest271314

@xufox说题目不太恰当。他所问的是右侧的括号包裹，而不是左侧没有参数的lambda函数的括号。请注意保持原意并将语言更加通俗易懂。 - StuartLC

由于花括号用于表示函数体，因此想要在箭头函数之外返回一个对象字面量的箭头函数必须将该字面量包裹在括号中。在此找到相关信息：https://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/ ，在“Usage”之前的页面中提到。 - Paul T.

欢迎来到 Ecmascript 2015！ - user6445533

Answer 1

不。那些括号产生了一个对象字面量。 箭头函数 有许多语法，其中之一是：

( … ) => expression

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

() => 1 + 1

这个函数会隐式返回1 + 1，也就是2。另一个例子如下：

( … ) => { … }

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

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

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

这些括号是为了将{ … }解释为对象字面量而存在的，而不是块。在分组运算符( … )中，只有表达式可以存在于其中。块不是表达式，但对象字面量是，因此假定为对象字面量。因此，它将使用以下语法而不是创建块：

( … ) => expression

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

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

这里的逗号会被解释为逗号运算符，而且操作数必须是表达式，而标签是语句，因此会抛出语法错误。

- Andrew Li

---

除了我不理解你的陈述“那些圆括号也没有包装对象文字，但是生成一个对象文字”，这个答案是正确的。 在我的理解中，正是圆括号将对象文字包装起来。 你在答案中提到的原因，确实需要用括号将对象文字包裹起来。 - ruakh

@ruakh 我知道有点晚了（一年晚了），但是出于某种原因我从来没有编辑过这个答案。我同意它很令人困惑。已删除第一个从句。 - Andrew Li

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'
}

- Trash Can

---

这句话的意思是：“说 let a = () => ({ id: 'abc', name: 'xyz' }) 和 let a = () => {return ({ id: 'abc', name: 'xyz' })} 以及 let a = () => {return {id: 'abc', name: 'xyz' }} 是一样的，这种说法正确吗？” 答案是正确的，这三个表达式的结果相同，只是语法上略有不同。 - Mallory-Erik

@Mallory-Erik Yeep - Trash Can