ES6 の矢印関数で括弧や中括弧を使用する必要があるのはどのような場合ですか?

アロー関数での括弧または中括弧の使用

ES6 では、アロー関数は関数を定義するための簡潔な構文を提供します。ただし、よくある混乱の 1 つは、太い矢印 (=>) の後に括弧または中括弧が使用されていることです。

単一値の戻り: 括弧

括弧は次の場合に使用されます。アロー関数は次のような単一の値を返します。

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

この例では、アロー関数は JSX 要素を返します。単一の要素であるため、かっこが使用されます。

複数行のコード: 中かっこ

アロー関数が複数行のコードを実行する場合は中かっこが必要です:

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

ここでは、アロー関数は複数の操作を実行するため、curly を使用しますbraces.

JSX のあいまいさ

次の例のかっこは、JSX を使用しているため混乱して見えるかもしれません。

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

見た目は複数行を使用すると、JSX は実際には 1 つの要素にコンパイルされます。そのため、括弧は

その他の例

明確にするために、ここに追加の例をいくつか示します。

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 中国語 Web サイトの他の関連記事を参照してください。