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

小开

最佳答案

Jackson在类似的问题中有部分回答这个:

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

这将导致错误，当一行扩展到多行，程序员忘记添加return。

隐式返回在语法上是不明确的。__abc0返回对象{id: name}…对吧?错了。它返回undefined。这些大括号是一个显式块。id:是一个标签。

我将在此添加块的定义:

块语句(或其他语言中的复合语句)用于对零条或多条语句进行分组。该块由一对花括号分隔。

< p > 例子:

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

小开

我理解这个经验法则……

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

候选人:

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


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

对于其他操作(需要块的不止一行程序)，return必须是显式的

小开

箭头函数允许你有一个隐式返回:返回值不需要使用return关键字。

当函数体中有一个联机语句时，它可以工作:

const myFunction = () => 'test'


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

另一个例子，返回一个对象(记得将花括号括在括号内，以避免它被认为是包装函数体括号):

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


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

小开

这里还有另一种情况。

例如，在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()的主体显式返回。此定义产生与上面相同的结果。这就是点的联系。比较上面的第一个代码块和下面的代码块，可以清楚地看到箭头函数本身被视为一个表达式，而不是块，并且具有隐含的返回值。

// 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;
};
};

最后，对于那些可能不得不阅读我的代码的人，以及未来的我，我想我更喜欢使用一眼就能从视觉上理解的非箭头版本，而不是需要花一些时间思考(在我的例子中是实验)才能理解的箭头版本。

小开

如果箭头函数省略括号{}和return关键字是可以的: 在return语句和之前，你不会有任何代码(例如赋值语句) (2)您将返回单个实体[注:单个实体可以是多行。如果是这样，那么你所需要的就是下面例子中的正则括号():

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