web-dev-qa-db-ja.com

中括弧のない矢印関数

私はES6とReactの両方に慣れていないのに、矢印関数を見続けています。なぜ、いくつかの矢印関数は太い矢印の後に中括弧を使用し、一部は括弧を使用するのですか？

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

vs.

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

助けてくれてありがとう！

javascriptecmascript-6react-jsxarrow-functions
43
dkimot

括弧は単一の値を返し、中括弧は複数行のコードを実行しています。

あなたの例は、複数の「行」のように見えるが実際には単一の「要素」にコンパイルされるJSXを使用しているため、紛らわしいように見えます。

以下は、すべて同じことを行ういくつかの例です。

const a = (who) => "hello " + who + "!";
const b = (who) => (
    "hello " + 
    who + 
    "!"
);
const c = (who) => {
  return "hello " + who + "!";
};

また、オブジェクトリテラルの周りに括弧が表示されることもよくあります。これは、パーサーがオブジェクトリテラルをコードブロックとして扱うことを回避する方法だからです。

const x = () => {} // Does nothing
const y = () => ({}) // returns an object
83
david

中括弧を使用して、単一行の矢印関数が値を返すのを防ぐことも、次の開発者に単一行の矢印関数がこの場合は何も返さないようにすることもできます。

例えば：

const myFunc = (stuff) => { someArray.Push(stuff) }
const otherFunc = (stuff) => someArray.Push(stuff)

console.log(myFunc())    // --> logs undefined
console.log(otherFunc()) // --> logs result of Push which is new array length
15
GrayedFox

実際、誰かが矢印関数宣言で中括弧を使用するブリーフケースでは、以下と等しくなります。

const arrow = number => number + 1;

|||

const arrow = (number) => number + 1;

|||    

const arrow = (number) => ( number + 1 );

|||

const arrow = (number) => { return number + 1 };
6
AmerllicA

最初の例では、矢印関数の右側に、グループ化演算子で囲まれた単一の式が示されています。

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

同様の比較可能なケースは次のとおりです。

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

上記の単一の式を使用する場合の違いは、右側が関数の戻り値であることです。

一方、中括弧を使用すると、JavaScriptはそれをステートメントとして理解します。

const foo = (params) => {} // this is not an object being returned, it's just an empty statement

したがって、ステートメントを使用することは、複数行のコードを作成するのに適した開始点であり、関数が値を返すことを目的とする場合は「return」を使用する必要があります。

const foo = (params) => {
    let value = 1; 
    return value;
}

空のオブジェクトを最短形式で返したい場合：

const foo = (params) => ({})

テストを参照

1
Marcio S Galli