代码之家 › 专栏 › 技术社区 › Skarlinski

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

arrow-functions return ecmascript-6 reactjs javascript

Skarlinski · 技术社区 · 6 年前

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

试图弄清楚这在实际用例中的实际含义。汽车类比欢迎(;

2 回复 | 直到 6 年前

Roman Nime Cloud 6 年前

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

Suren Srapyan 6 年前

没有括号,对象声明用括号括起来 {} 被认为是会导致逻辑错误的箭头功能体。

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

params => { 
             foo: 'bar'
          }

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

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

推荐文章

James · 是否可以使用onClick在React中以较短的方式编写?

2 年前

Basti · 使用箭头函数将数组缩小为对象

6 年前

Skarlinski · 为什么将箭头函数体括在括号中

6 年前

Abulurd · PHP是否支持Arrow函数语法?

6 年前

Jyotirmaya Prusty · ES6箭头函数到普通JS转换[重复]

6 年前

Julius DzidzeviÄius · 在arrow函数[重复]中使用ComputedPropertyName创建对象文字

6 年前

LudvigH · 箭头样式用户定义的类型保护?

7 年前

Jason · 如果数组值包含一些字符串,如何过滤它

7 年前

Andrew Christopher · 为什么这个箭头功能会工作?

7 年前

ESS · 如何删除此代码中ES6箭头函数的使用

7 年前