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

IT技术 javascript ecmascript-6 arrow-functions
2020-12-16 16:20:36

ES6箭头功能,return是在某些情况下隐含的:

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

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

6个回答

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

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

  • 当单行扩展为多行并且程序员忘记添加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') 
需要明确的是,似乎是因为 JS 解析器不知道是期望表达式(例如包含对象字面量的表达式{})还是,所以它假定 a{ }表示块。也就是说,当它看到时id: name,它认为id:是一个创建标签的表达式(JS的一个非常不常用的特性,处理流控,使用了a :),然后name下面id:只是一个单独的语句,只包含变量name(&什么也没做)。
2021-02-08 16:20:36
使箭头函数的隐式返回系统化会有什么缺点?就像coffeescript所做的...(虽然我不喜欢coffeescript)
2021-02-10 16:20:36
我不明白那个语法..你是不是使用类沿海创建一个类,然后用一个参数('Jess')调用一个隐含的构造函数??我以为你会这样做 ((name) => ({id: 'Jess'}))
2021-02-23 16:20:36
非常有用!有助于发现 Promises.all 中使用箭头函数映射项目的问题,如果没有返回值用于使用箭头函数映射数组,您可以注意到是否获得了 undefined 数组。
2021-02-24 16:20:36
@MichaelDausmann 这是一个箭头函数,它有一个参数 ,name函数用括号括起来,并用一个参数“Jess”调用。在每种情况下=>之间的代码)('Jess')是箭头函数的主体。将其视为以下形式的立即调用函数表达式的简短形式(function (name) { return { id: name } })('Jess')
2021-02-27 16:20:36

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

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

候选人是:

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

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

对于其他操作(需要一个块的多个单行,返回必须是显式的

这里还有一个案例。

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

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);
你总是可以使用括号,它JSX 或 React无关
2021-02-10 16:20:36

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

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

最后,对于其他可能需要阅读我的代码的人,以及未来的我,我想我更愿意使用第一眼可以在视觉上理解的非箭头版本,而不是需要大量时间的箭头版本想(在我的情况下是实验)去理解。

很好的解释!谢谢你。
2021-02-15 16:20:36
很好的解释。你能表达它调用的方法/过程吗?
2021-02-21 16:20:36
基本上,这样对吗?const wrap = function(foo) { return function(bar) { if (foo === 'foo') return foo + ' ' + bar; 返回 '​​nofoo' + bar; }; }; // 运行 wrap 函数: wrap('foo')('bar');
2021-02-24 16:20:36

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

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

const myFunction = () => 'test'

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

另一个例子,返回一个对象(记住将大括号包裹在括号中,以避免它被认为是包裹函数体括号):

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

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

这应该是正确答案,尽管需要更多解释。基本上,当函数体是一个表达式而不是一个块时,该表达式的值是隐式返回的。如果我错了纠正我。
2021-02-27 16:20:36