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

Question

我见过这样的JavaScript代码:

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

( … )在这种情况下,包装对象的括号引用了什么？这是速记return吗？

Answer 1

不.这些括号产生一个对象字面值.箭头函数有许多语法,其中一个是:

( … ) => expression

这将隐式返回一个表达式,例如:

() => 1 + 1

这个函数将隐式返回1 + 1,即2.另一个是这样的:

( … ) => { … }

如果您不想隐式返回表达式,并且您想要进行中间计算或根本不返回值,则会创建一个容纳多个语句的块.例如:

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

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

括号用于{ … }解释对象文字,而不是块.在分组运算符中( … ),只有表达式可以存在于它们中.块不是表达式,但对象文字是,因此假设一个对象常量.因此,它将使用以下语法,而不是创建块:

( … ) => expression

并隐式返回一个对象文字.如果没有括号,它将被解释为标签和字符串,而不是对象文字的键和值.

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

这里的逗号将被解释为逗号运算符,并且由于操作数必须是表达式,而标签是语句,因此会引发语法错误.

Answer 2

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

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

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

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

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