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