比特理论

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

没有括号，对象声明括号{}被视为箭头函数体，它将导致逻辑错误。

此params => { foo: 'bar'}被视为

params => { 
             foo: 'bar'
          }

＆＃13;

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

＆＃13;

Answer 2

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