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

Question

在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})

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

Answer 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>
)

Answer 2

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

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

params => { 
             foo: 'bar'
          }

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

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