时间戳

首页 > 解决方案 > 我们什么时候必须在 ES6 箭头函数中使用 () 和 {}

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

问题描述

我对在箭头函数中互换使用括号和花括号感到困惑。

例如，

花括号的使用 

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

括号的使用

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

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

标签： javascriptfunctionecmascript-6

解决方案

当您使用花括号（花括号）时，它定义了函数体 - 因此您可以在其中放置多个分号分隔的语句。如果您希望从函数返回值，则必须显式使用该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到控制台，然后您正在记录函数的返回值 - 但是， using{}需要具有显式return关键字，所以这是undefined因为我们不从函数返回任何内容。

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

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

这里有一个很好的解释，但基本上当你有一个返回对象的函数时，花括号{}表示该对象，而括号强制执行包含的表达式的隐式返回 - 对象。所以对象被创建，然后表达式被计算并返回。

推荐阅读