什么时候应该在 ES6 箭头函数中使用 return 语句

Question

新的ES6 arrow functions说return在某些情况下是隐式的：

The expression is also the implicit return value of that function.

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

Answer 1

Jackson 部分 answered this 在类似的问题中：

Implicit return, but only if there is no block.

This will result in errors when a one-liner expands to multiple lines and the programmer forgets to add a return.

Implicit return is syntactically ambiguous. (name) => {id: name}returns the object {id: name}... right? Wrong. It returns undefined. Those braces are an explicit block. id: is a label.

我要添加一个 block:

的定义

A block statement (or compound statement in other languages) is used to group zero or more statements. The block is delimited by a pair of curly brackets.

示例：

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

Answer 2

我明白了 rule-of-thumb ...

For functions that are effectively transforms (one-line-manipulations of arguments), return is implicit.

候选人是：

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

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

对于其他需要块的操作（超过 one-liners，return 必须是显式的

Answer 3

箭头函数允许您有一个隐含的 return：值是 returned 而无需使用 return 关键字。

当函数体中有在线语句时有效：

const myFunction = () => 'test'

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

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

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

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

Answer 4

这里还有一个案例。

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

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);

Answer 5

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

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

这里我们定义了一个函数return一个匿名的function.The "tricky"位是外层函数的函数体（(bar)=>..开头的部分） .) 视觉上看起来像 "block"，但它不是。因为它不是，隐式 return 开始。

包装的执行方式如下：

// 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'));

我解压它以确保我理解它的方式是 "unarrowify" 函数。

这是第一个代码块的语义等价物，只是让 wrap() 的主体执行显式 return。该定义产生与上述相同的结果。这是点连接的地方。比较上面的第一个代码块和下面的代码块，很明显箭头函数本身被视为 an expression, not a block, and has the implied 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;
  };
};

最后，对于其他可能需要阅读我的代码的人，以及未来的我，我想我更愿意去第一眼就可以理解的非箭头版本，而不是箭头版本需要相当多的思考（在我的例子中是实验）才能理解。

Answer 6

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

posts.map(post => (
  <li key={post.id}>
    {post.title}
  </li>
))

什么时候应该在 ES6 箭头函数中使用 return 语句

When should I use a return statement in ES6 arrow functions

javascript

ecmascript-6

arrow-functions