我们什么时候必须在 ES6 箭头函数中使用 () 和 {}答案

【问题标题】：When do we have to use () and {} in ES6 Arrow Functions我们什么时候必须在 ES6 箭头函数中使用 () 和 {}
【发布时间】：2019-06-13 01:59:36
【问题描述】：

我对在箭头函数中交替使用括号和花括号有点困惑。

例如，

花括号的使用

const sayHello = () => { console.log('Hello') }

括号的使用

const sayHello = () => ( console.log('Hello') )

两者都在控制台上提供相同的输出。他们两个意思一样吗？对不起，如果这个问题听起来很愚蠢。

【问题讨论】：

应该是const sayHello = () => ( console.log('Hello') )
@VincentRamdhanie 我刚刚编辑了我的问题。很高兴，你抓住了它。

标签： javascript function ecmascript-6

【解决方案1】：

当您使用花括号（花括号）时，它定义了函数体——因此您可以在其中放置多个以分号分隔的语句。如果你想从函数中返回一个值，你必须明确地使用return 语句。

如果您使用括号，您将返回括号内表达式的值，并且只能有一个表达式（没有分号）。如果你想用括号做多件事，你可以使用逗号运算符：

const doTwoThings = () => (console.log("Hello"), console.log("Goodbye"));
console.log(doTwoThings());

在这里，您记录的是Hello，然后是Goodbye，然后您记录的是函数的返回值——即undefined。

你可以在花括号内做同样的事情，你不会看到任何明显的区别：

const doTwoThings = () => {console.log("Hello"), console.log("Goodbye")};
console.log(doTwoThings());

再次将Hello 和Goodbye 记录到控制台，然后记录函数的返回值 - 但是，使用{} 需要有明确的return 关键字，所以它是@ 987654332@ 因为我们没有从函数返回任何东西。

另请注意，有时您会同时看到括号和花括号：

const aFunction = () => ({ foo: "bar" });
console.log(aFunction());

here 有一个很好的解释，但基本上当您有一个返回对象的函数时，花括号 {} 表示该对象，而括号强制隐式返回包含的表达式 - 对象。因此创建了对象，然后计算并返回表达式。

【讨论】：

很棒的解释！现在，我明白了。
没问题@Pavan，总是乐于提供帮助。
Nit: "并且只能有一个语句（没有分号）" 它必须是一个表达式，而不是一个语句（例如你不能这样做() => if (x) y )。
我的坏@FelixKling，我总是把这两个搞混。你有办法确定哪个是哪个（或者你刚刚记住了列表）吗？
任何可以放在作业左侧的东西通常都是表达式。但是 ecmascript 规范实际上将表达式分隔在两个不同的部分，并且仅查看目录/菜单对 IMO 很有用。

【解决方案2】：

当您使用“花括号”时，就像您在定义一个普通函数一样，像往常一样拥有多个语句。在您的示例中，它运行 console.log('Hello') 并且不返回任何内容。使用括号时，只能指定一个表达式，然后该表达式的结果将成为返回值。也就是说=> (bar)与=> { return bar; }基本相同。在您的情况下，两者的工作方式相同，因为您只是将该函数用于其副作用，而不关心它的返回值。

【讨论】：