为啥将箭头函数体包装在括号中

Posted 2023-02-22

【中文标题】为啥将箭头函数体包装在括号中

【英文标题】：Why wrap Arrow function body in parentheses为什么将箭头函数体包装在括号中

【发布时间】：2018-08-05 18:02:31

【问题描述】：

在survivejs 代码示例中，我遇到了一个用括号括起来的函数：

export default () => (
  <ul>
      notes.map(note =>
          //some code
      )
  </ul>
)

MDN 是这样解释的：

// Parenthesize the body of function to return an object literal expression:
params => (foo: bar)

试图弄清楚这在现实世界的用例中究竟意味着什么。欢迎使用汽车类比（;

【问题讨论】：

顺便说一句，这个特殊的代码也可以在没有括号的情况下工作

【参考方案1】：

MDN 声明用于返回一个对象字面量。但我想你想知道为什么有些人将返回指令放在括号中而不考虑对象字面量。

一点理论

在 javascript 中是分号可选。如果您不知道自动分号插入的行为，这可能会导致一些错误。

当您有一个带有换行符的return 时，它将返回一个undefined

const add = (x, y) => 
  return
    x + y


console.log( add(1, 1) )  // undefined

自动分号插入之后的等价物是：

const add = (x, y) => 
  return;
  x + y;
;

console.log( add(1, 1) );

但是如果换行是必须的，例如为了可读性.. 解决方案是将表达式包装到括号中。

const add = (x, y) => 
  return (
    x + y
  )


console.log( add(1, 1) ) // 2

您的用例

为了去掉括号，我们可以在=> 之后直接提升<ul> 标签。

const functionName = xs => <ul>
    xs.map(note =>
        //some code
    )
</ul>

但是现在它不再可读了..所以我们应该快速重新插入括号

const functionName = xs => (
    <ul>
        xs.map( x =>
            //some code
        )
    </ul>
)

【参考方案2】：

如果没有括号，对象声明括号被认为是箭头函数体，会导致逻辑错误。

这个params => foo: 'bar'被认为是

params =>  
             foo: 'bar'
          

const func1 = params =>  foo: 'bar';
console.log(func1());

const func2 = params => ( foo: 'bar');
console.log(func2());

【讨论】：

好的，在你提出的用例中得到了它，知道为什么它属于上面的代码吗？ （可能是一个错误）

@Skarlinski 通常，它应该像它的 JSX 一样正常工作，但如果您使用任何 linting，则可能会引发警告。此外，括号的另一个原因可能是 JSX 可以是多行的，因此要包装在 1 条语句中，这可能是必要的

我在问题中分享了一本书的代码示例，他始终使用这种格式，我正在尝试看看是否有实际的好处

@Rajesh 有帮助。但是跑题了：jsx 不是总是被转换成单个语句吗？

@rajesh 而且，这是我应该采用的 jsx 最佳实践吗？