JavaScript のアロー関数: 括弧と中括弧をいつ使用するか?

アロー関数: 括弧と中括弧を使用する場合

ES6 で導入されたアロー関数は、関数を定義するための簡潔な構文です。これらは、関数本体を表すために「太い矢印」(=>) を利用します。ただし、アロー関数は中括弧 ({}) を使用する場合もあれば、括弧 (()) を使用する場合もあることに注意してください。

単一行の戻り値の括弧

アロー関数の本体が 1 つの式で構成されている場合、その式を括弧で囲み、アロー関数がその値のみを返すことを示します。例:

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

このコードは、文字列を返すアロー関数を定義します。 「hello ${who}!」を囲む括弧

複数行のコード ブロックの中括弧

中括弧は、アロー関数の本体に複数行のコードが含まれる場合に使用されます。各行はステートメントを表し、本文全体がコード ブロックになります。例:

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

このコードは 2 つのステートメントを含むイベント ハンドラーを定義しているため、中かっこが必要です。

実際の例

を説明する次の例を考えてみましょう。違い:

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

オブジェクト リテラルのかっこ

アロー関数のかっこのもう 1 つの用途は、オブジェクト リテラルを囲むことです。これは、パーサーがオブジェクトをコード ブロックとして扱うのを防ぐために行われます。

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

このコードは、空のオブジェクトを返すアロー関数を定義します。括弧を使用すると、パーサーがコード ブロックではなくオブジェクト リテラルとして解釈することが保証されます。

したがって、アロー関数で中括弧または括弧を使用するかどうかは、関数本体に単一行の式が含まれるか複数行の式が含まれるかによって異なります。コード行。括弧は単一の式に使用され、中括弧はコード ブロックに使用されます。

以上がJavaScript のアロー関数: 括弧と中括弧をいつ使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。