为什么花括号会破坏案例陈述中的箭头功能？

箭头函数中的大括号：揭开谜团

在 Dan Abramov 的讲座中，出现了一个有趣的问题：为什么大括号会导致函数测试失败？让我们调查这个谜团。

有问题的代码是 case 语句中的箭头函数：

case 'toggleTodo' :
        return (
            state.map( (one) => {
                oneTodo( one, action )
            })
        );

当包含大括号 { } 时，测试失败。然而，当它们被省略时，代码可以完美地工作。下面是幕后发生的事情。

大括号的力量：块和显式返回

当您将函数体括在大括号中时，您创建了一个 阻止。块可以包含多个语句，每个语句都以分号结尾。如果要从块返回值，则必须显式使用 return 语句。

对于带有大括号的箭头函数，主体仅包含对oneTodo()。由于没有显式的 return 语句，该函数返回 undefined。这种意外行为会导致测试失败。

要纠正此问题，您需要显式返回 oneTodo() 调用的结果：

(one) => {
    return oneTodo(one, action);
}

简洁的主体：为了简单而省略大括号

如果省略大括号中，箭头函数有一个简洁的函数体。简洁主体由单个表达式组成，其结果被隐式返回。

在没有大括号的示例中，简洁主体为：

(one) => oneTodo( one, action )

该表达式相当于：

return oneTodo( one, action );

通过省略大括号，您无需显式即可获得相同的结果return 语句。

理解差异

关键要点是理解 块 之间的区别（由大括号）和简洁的正文（由没有大括号表示括号）。块需要显式的 return 语句，而简洁的主体则隐式返回单个表达式的结果。

因此，在 case 语句中使用箭头函数时，请记住使用大括号和显式的 return 语句（如果您需要在函数体内包含多个语句）。如果您只需要单个表达式，则可以省略大括号以创建简洁的正文。

以上是为什么花括号会破坏案例陈述中的箭头功能？的详细内容。更多信息请关注PHP中文网其他相关文章！