ES6 箭头函数中什么时候应该使用括号或大括号？-js教程-PHP中文网

ES6 箭头函数中什么时候应该使用括号或大括号？

Mary-Kate Olsen

发布： 2024-12-09 15:02:39

原创

743 人浏览过

When Should I Use Parentheses or Curly Braces in ES6 Arrow Functions?

在箭头函数中使用括号或大括号

在 ES6 中，箭头函数为定义函数提供了简洁的语法。然而，一个常见的混淆是在粗箭头 (=>) 之后使用括号或大括号。

单值返回：括号

括号用于以下情况箭头函数返回单个值，例如：

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

登录后复制

在此示例中，箭头函数返回一个 JSX 元素。由于是单个元素，所以使用括号。

多行代码：大括号

箭头函数执行多行代码时需要大括号：

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

登录后复制

这里，箭头函数执行多个操作，因此它使用了curly

与 JSX 的歧义

以下示例中的括号可能看起来很混乱，因为它使用了 JSX：

const foo = (params) => (
    <span>
        <p>Content</p>
    </span>
);

登录后复制

虽然它看起来使用多行，JSX 实际上被编译为单个元素，这就是括号的原因

其他示例

为了澄清起见，这里有一些附加示例：

const a = (who) => "hello " + who + "!";
const b = (who) => ("hello " + who + "!");
const c = (who) => (
  "hello " + who + "!"
);
const d = (who) => (
  "hello "
    + who
    + "!"
);
const e = (who) => {
  return "hello " + who + "!";
};

登录后复制

这些函数都返回相同的结果，演示了根据执行的数量灵活使用括号或大括号

避免解析器混乱

括号也可以用在对象文字周围，以避免解析器将它们视为代码块：

const x = () => {} // Does nothing
const y = () => ({}) // Returns an object

登录后复制

以上是ES6 箭头函数中什么时候应该使用括号或大括号？的详细内容。更多信息请关注PHP中文网其他相关文章！