Javascript ES6 ()=>() 和 ()=> 之间的区别 [重复]

Posted 2023-02-21

【中文标题】Javascript ES6 ()=>() 和 ()=> 之间的区别 [重复]

【英文标题】：Javascript ES6 Difference between ()=>() and ()=> [duplicate]Javascript ES6 ()=>() 和 ()=> 之间的区别 [重复]

【发布时间】：2017-04-11 16:52:48

【问题描述】：

我在学习 React 时看到过类似的代码

const LinkCell = (rowIndex, data, col, ...props) => (
  <Cell ...props>
    <a href="#">data.getObjectAt(rowIndex)[col]</a>
  </Cell>
);

另外，到目前为止，我认为在 ES6 中的函数简写是

let sum = (a, b)=>
   return a + b;

第一个和第二个有什么不同？

【问题讨论】：

第二个也可以写-let sum = (a, b)=> a + b;

()=>() 的第二组括号用于分组，因此它不需要 所需的return 关键字。

@nnnnnn () => (...) 用于 React 的 JSX。如果我没记错的话，它表示 JSX。但是=> ... 创建了一个带有语句的新块，而=> (...) 就像=> return (...) 。除非您创建一个新块，否则箭头后面的值是返回值 - 隐式。

@AndrewLi - 我不使用 JSX，但 ()=>() 在普通 (ES6) JS 中完全有效（假设你实际上在第二个括号内放了一些东西）。

@AndrewLi：(...) 与 JSX 无关。它们似乎只是为了可读性而添加的。它们也可以在不改变功能的情况下省略。

【参考方案1】：

() => () 是() => doSomething() OR return; 的单行简写。

无论如何，如果您需要更多操作并且需要多行语句，您应该使用() => 语法，否则您可以使用简写语法() => ()

以下也被视为一行语句。但是要使用() => ()语法，你需要在没有return语句的情况下重写它，

// The below one line statement can be rewritten as below
if (true ) return something;

// rewritten of above one
() => ( a > b ? a : b)

// one line statement
if (true ) invoke();  // This will go like, () => (a ? a.invoke() : b.invoke())

// one line statement
for(var i in results) doSomething();

//And your jsx statement which can be tread as one liner
<Cell ...props>
    <a href="#">data.getObjectAt(rowIndex)[col]</a>
  </Cell>

【讨论】：

(...) => (...); 用于在 React 的无状态组件中返回 JSX。它相当于(...) => return (...); 。 (...) 表示 JSX。

是的，同意，这个jsx被视为一行语句，例如if (true ) invoke();

感谢您的解释。不幸的是，我认为我不能以我目前的声誉投票。

"() => () 是 () => doSomething() OR return; 的单行简写。" 不，它相当于@ 987654333@.

【参考方案2】：

使用 ()=> () 语法想象是否存在隐式返回语句，例如() => return ()

【讨论】：

为这个表单提供正确的术语是非常有用的，即“简洁的正文”。