杰克逊在类似的问题中部分回答了这个:
隐式返回,但前提是没有块。
- 当一行扩展为多行并且程序员忘记添加
时,这将导致错误.return
- 隐式返回在语法上是不明确的。
返回对象(name) => {id: name}
...对吗?错误的。它返回{id: name}
。那些大括号是一个明确的块。undefined
是一个标签。id:
我要添加一个block的定义:
块语句(或其他语言中的复合语句)用于对零个或多个语句进行分组。该块由一对大括号分隔。
例子:
// 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')
我理解这个经验法则......
对于有效转换的函数(参数的单行操作),返回是隐式的。
候选人是:
// square-root
value => Math.sqrt(value)
// sum
(a,b) => a+b
对于其他操作(不止一行需要一个块,return 必须是显式的
这里还有一个案例
比如在React中写函数式组件时,可以用括号把隐式返回的JSX包裹起来
const FunctionalComponent = () => (
<div>
<OtherComponent />
</div>
);
还有一个案例给我带来了一些麻烦。
// 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'));
我解压它以确保我理解它的方式是“unarrowify”功能。
这是第一个代码块的语义等价物,只是让 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;
};
};
最后,对于可能需要阅读我的代码的其他人,以及未来的我,我想我更愿意去第一眼就可以在视觉上理解的非箭头版本,而不是需要相当多时间的箭头版本思想(在我的案例中是实验)到 grok.
箭头函数允许您隐式返回:无需使用
return
关键字即可返回值。
函数体中有在线语句时有效:
const myFunction = () => 'test'
console.log(myFunction()) //'test'
另一个例子,返回一个对象(记得把大括号括在圆括号里,以免被认为是包装函数主体括号):
const myFunction = () => ({value: 'test'})
console.log(myFunction()) //{value: 'test'}
在以下情况下,省略括号 {} 和箭头函数的 return 关键字是可以的: (1) 在返回语句之前你不会有任何代码(例如赋值语句)和 (2) 您将返回单个实体 [注意:单个实体可以是多行。如果是这样,那么您只需要像下面的示例一样的常规括号():
posts.map(post => (
<li key={post.id}>
{post.title}
</li>
))