ES6 中的箭头函数：圆括号或大括号 – 何时使用哪个？

箭头函数：圆括号与大括号

ES6 中的箭头函数为定义函数提供了简洁的语法。然而，当您遇到不同格式的箭头函数时，可能会感到困惑，有些带有大括号，有些带有括号。

括号：单个表达式

带括号的箭头函数在粗箭头之后返回单个表达式。以下示例返回一个 span 元素：

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

花括号：多个表达式

相反，带有花括号的箭头函数执行多行代码。这种格式允许更复杂的操作，例如更新状态或处理事件：

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

JSX 和多行

带有 foo 的示例可能看起来很混乱，因为它使用 JSX (JavaScript XML)，它表示 HTML 元素。该代码看似跨越多行，但实际上被编译为单个元素。

其他示例

以下是更多示例，说明了差异：

const a = (who) => `hello ${who}!`; // Parentheses: Single expression
const b = (who) => (`hello ${who}!`); // Parentheses: Equivalent to (a)
const c = (who) => (...
  `hello ${who}!`...); // Curly braces: Multiple lines
const d = (who) => (
  `hello \
    ${who}!` // Curly braces: Multiple lines
);
const e = (who) => {
  return `hello ${who}!`; // Curly braces: Multiple lines with explicit return
};

对象周围的括号文字

您还可能会遇到对象文字周围的括号。这种做法可以避免解析器混淆，否则解析器可能会将对象字面量视为代码块：

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

总之，带括号的箭头函数返回单个表达式，而带花括号的箭头函数执行多行代码。理解这种区别对于编写有效且可读的 ES6 代码至关重要。

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