191

新的ES6 箭头函数sayreturn在某些情况下是隐含的：

该表达式也是该函数的隐式返回值。

在什么情况下我需要使用returnES6 箭头函数？

4

6 回答 6

305

杰克逊在一个类似的问题中部分回答了这个问题：

隐式返回，但前提是没有阻塞。

  • 当单行扩展为多行并且程序员忘记添加return.
  • 隐式返回在语法上是模棱两可的。(name) => {id: name}返回对象{id: name}...对吗？错误的。它返回undefined。这些大括号是一个显式块。id:是一个标签。

我会添加一个块的定义：

块语句（或其他语言中的复合语句）用于对零个或多个语句进行分组。该块由一对大括号分隔。

例子： 

// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})() 

// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')

// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')

// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess') 

// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess') 

// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess') 

// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess')
于 2015-03-05T22:56:42.180 回答
24

我理解这个经验法则...

对于有效转换的函数（参数的单行操作），return 是隐式的。

候选人是：

// square-root 
value => Math.sqrt(value)

// sum
(a,b) => a+b

对于其他操作（需要块的多行，return 必须是显式的

于 2017-01-11T23:43:22.843 回答
13

这里还有一个案例。

在 React 中编写函数式组件时，可以使用括号来包装隐式返回的 JSX。

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);
于 2018-07-06T09:46:19.757 回答
10

这是另一个给我带来麻烦的案例。

// the "tricky" way
const wrap = (foo) => (bar) => {
  if (foo === 'foo') return foo + ' ' + bar;
  return 'nofoo ' + bar;
}

这里我们定义了一个返回匿名函数的函数。“棘手”的一点是外部函数的函数体（以 (bar) => ... 开头的部分）在视觉上看起来像一个“块”，但事实并非如此。既然不是，隐式返回就开始了。

以下是 wrap 的执行方式：

// use wrap() to create a function withfoo()
const withfoo = wrap('foo');
// returns: foo bar
console.log(withfoo('bar'));

// use wrap() to create a function withoutfoo()
const withoutfoo = wrap('bar');
// returns: nofoo bar
console.log(withoutfoo('bar'));

我打开包装以确保我理解它的方式是“取消”功能。

这是第一个代码块的语义等价物，只是让 wrap() 的主体进行显式返回。此定义产生与上述相同的结果。这是点连接的地方。比较上面的第一个代码块和下面的代码块，很明显箭头函数本身被视为表达式，而不是块，并且具有隐含的 return。

// the explicit return way
const wrap = (foo) => {
  return (bar) => {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  }
}

wrap 的完全未箭头版本将是这样的，虽然不像胖箭头向上版本那样紧凑，但似乎更容易理解。

// the "no arrow functions" way
const wrap = function(foo) {
  return function(bar) {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  };
};

最后，对于可能需要阅读我的代码的其他人，以及未来的我，我想我更愿意使用第一眼就可以理解的非箭头版本，而不是需要相当多的箭头版本想（在我的情况下是实验）去摸索。

于 2019-01-29T16:30:28.910 回答
6

箭头函数允许您进行隐式返回：无需使用return关键字即可返回值。

它在函数体中有在线语句时起作用：

const myFunction = () => 'test'

console.log(myFunction()) //'test'

另一个例子，返回一个对象（记得将花括号括在括号中以避免它被认为是包装函数体括号）：

const myFunction = () => ({value: 'test'})

console.log(myFunction()) //{value: 'test'}

于 2018-04-22T09:29:45.743 回答
1

在以下情况下，可以从箭头函数中省略括号 {} 和 return 关键字：（1）在 return 语句之前您不会有任何代码（例如赋值语句），并且（2）您将返回单个实体 [注意：单个实体可以是多行。如果是这样，那么您只需要常规括号（），如下例所示：

posts.map(post => (
  <li key={post.id}>
    {post.title}
  </li>
))
于 2021-02-26T06:50:29.690 回答