JavaScript 中的箭头函数：何时使用圆括号与花括号？

箭头函数：何时使用圆括号和大括号

ES6 中引入的箭头函数是定义函数的简洁语法。他们利用“粗箭头”（=>）来表示函数体。不过，值得注意的是，箭头函数有时使用大括号 ({})，而其他函数则使用括号 (())。

单行返回表达式的括号

当箭头函数的主体由单个表达式组成时，使用括号将表达式括起来，表示箭头函数仅返回该值。例如：

const a = (who) => `hello ${who}!`;

这段代码定义了一个返回字符串的箭头函数。 'hello ${who}!' 周围的括号表示它是单个表达式。

多行代码块的大括号

当箭头函数体包含多行代码时使用大括号。每一行代表一个语句，整个正文成为一个代码块。例如：

const handleBar = (e) => {
  e.preventDefault();
  dispatch('logout');
};

此代码定义了一个包含两个语句的事件处理程序，因此需要大括号。

实践示例

考虑以下示例来说明区别：

const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);

对象文字中的括号

箭头函数中括号的另一个用途是括住对象文字。这样做是为了防止解析器将对象视为代码块。

const y = () => ({}); // returns an object

此代码定义了一个返回空对象的箭头函数。括号确保解析器将其解释为对象字面量，而不是代码块。

因此，在箭头函数中使用花括号还是括号取决于函数体是否包含单行表达式还是多个代码行。括号用于单个表达式，而大括号用于代码块。

以上是JavaScript 中的箭头函数：何时使用圆括号与花括号？的详细内容。更多信息请关注PHP中文网其他相关文章！