将对象文字包装在箭头函数中的括号是啥意思？ [复制]

Posted 2023-02-22

【中文标题】将对象文字包装在箭头函数中的括号是啥意思？ [复制]

【英文标题】：What do the parentheses wrapping the object literal in an arrow function mean? [duplicate]将对象文字包装在箭头函数中的括号是什么意思？ [复制]

【发布时间】：2017-12-13 16:41:28

【问题描述】：

我见过这样的 javascript 代码：

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

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

【问题讨论】：

没有()包围 id: 'abc', name: 'xyz' 会抛出语法错误，( id: 'abc', name: 'xyz' )是一个表达式

@xufox OPs 标题很差。他问的是 rhs 包装括号，而不是 lhs 上的无参数 lambda 括号。

因为花括号用于表示函数的主体，所以想要在函数主体之外返回对象字面量的箭头函数必须将字面量括在括号中。在此处找到该信息：nczonline.net/blog/2013/09/10/… ... 在使用前的页面下方。

欢迎使用 Ecmascript 2 0 1 5 ！

【参考方案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，由于操作数必须是表达式，而标签是语句，会抛出语法错误。

【讨论】：

这个答案是正确的，除了我不明白你的陈述“那些括号也不是包装对象文字，而是 produce 一个对象文字。”在我看来，包装对象文字正是括号正在做的事情。由于您在答案中给出的原因，对象文字需要用括号括起来。

@ruakh 我知道这有点晚了（晚了一年），但由于某种原因我一直没有时间编辑这个答案。我同意这令人困惑。删除了第一个子句。

【参考方案2】：

它允许你创建一个表达式，所以

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

指定a在被调用时，返回封闭对象

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

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

【讨论】：

那么说let a = () => ( id: 'abc', name: 'xyz' ) 与let a = () => return ( id: 'abc', name: 'xyz' ) 相同，然后也与let a = () => return id: 'abc', name: 'xyz' 相同是否正确？

@Mallory-Erik Yeep