箭头函数中的花括号

Question

请问有人能解释一下以下内容：

我正在跟随Dan Abramov的讲座并完成练习。

代码可以正常运行，但是当使用花括号**{ }**来编写以下特定函数时，测试失败了。

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

同样的代码，没有花括号也能正常工作。

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

这是 JsBin，请参考31行以后的内容。

- Kayote

---

查看MDN文档应该能回答你的问题。 - Felix Kling

Answer 1

一对大括号形成一个代码块，其中包含一系列语句。你需要显式地使用return语句来使函数返回某些内容：

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

如果省略大括号，箭头函数具有简洁体，它仅由一个表达式组成，该表达式的结果将隐式成为函数的返回值。

- Bergi

Answer 2

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

等于：

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

查看返回语句

- madox2

Answer 3

在箭头函数中有多个语句时，使用花括号是一种公平的做法。 使用花括号将多个语句组成一个单独的块，避免在箭头函数内部出现错误。

- YATENDRA UPADHYAY

---

这几乎没有为7年前的现有答案增加任何内容。如果您需要有多个语句，使用花括号不是“公平惯例”，而是“如果您希望代码在语法上有效，则别无选择”。 - ggorlen

先生，这是来自javascript.info的推荐内容。多行箭头函数：有时我们需要一个更复杂的函数，包含多个表达式和语句。在这种情况下，我们可以将它们放在花括号中。主要区别在于花括号需要在其中使用return语句来返回值（就像常规函数一样）。网站链接：https://javascript.info/arrow-functions-basics这就是我想说的内容。 - YATENDRA UPADHYAY