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中文網其他相關文章！