ES6 の矢印関数: 括弧または中括弧 - いつどちらを使用するか?

アロー関数: 括弧と中括弧

ES6 のアロー関数は、関数を定義するための簡潔な構文を提供します。ただし、中括弧を使用したものや括弧を使用したものなど、異なる形式のアロー関数に遭遇すると、困惑する可能性があります。

括弧: 単一式

括弧を使用したアロー関数太い矢印の後には単一の式が返されます。次の例は、span 要素を返します。

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

中括弧: 複数の式

対照的に、中括弧を含むアロー関数は複数行のコードを実行します。この形式では、状態の更新やイベントの処理など、より複雑な操作が可能になります。

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

JSX と複数行

foo を使用した例は、複雑に見えるかもしれません。 HTML 要素を表す JSX (JavaScript XML) を使用します。コードは複数行にまたがっているように見えますが、実際には 1 つの要素にコンパイルされます。

追加の例

違いを示す例をさらにいくつか示します。

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