オブジェクトを返すECMAScript6矢印関数

655

jkschneider 2015-02-28 07:02.

矢印関数からオブジェクトを返す場合、文法があいまいなため{}、returnキーワードとキーワードの追加セットを使用する必要があるようです。

つまり、私は書くことができませんp => {foo: "bar"}が、書く必要がありますp => { return {foo: "bar"}; }。

矢印関数がオブジェクト以外のものを返す場合、{}およびreturnは不要ですp => "foo"。例：。

p => {foo: "bar"}を返しますundefined。

変更されたp => {"foo": "bar"}スロー「SyntaxError：予期しないトークン： ' :'」。

私が見逃している明らかなものはありますか？

javascript ecmascript-6 arrow-functions

5 answers

1141

alexpods 2015-02-28 07:10.

返されるオブジェクトリテラルを括弧で囲む必要があります。それ以外の場合、中括弧は関数の本体を示すと見なされます。次の作品：

p => ({ foo: 'bar' });

他の式を括弧で囲む必要はありません。

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

等々。

参照：MDN-オブジェクトリテラルを返す

Petr Odut 2016-06-15 23:40.

なぜ構文が有効なのか（しかし期待どおりに機能しないのか）疑問に思うかもしれません：

var func = p => { foo: "bar" }

これはJavaScriptのラベル構文によるものです：

したがって、上記のコードをES5にトランスパイルすると、次のようになります。

var func = function (p) {
  foo:
  "bar"; //obviously no return here!
}

Paul McBride 2017-08-09 22:48.

矢印関数の本体が中括弧で囲まれている場合、暗黙的に返されることはありません。オブジェクトを括弧で囲みます。こんな感じになります。

p => ({ foo: 'bar' })

本体を親でラップすることにより、関数はを返し{ foo: 'bar }ます。

うまくいけば、それはあなたの問題を解決します。そうでない場合は、最近、Arrow関数についての記事を書きました。お役に立てば幸いです。Javascriptの矢印関数

xgqfrms 2019-08-22 18:01.

正しい方法

通常の戻りオブジェクト


const getUser = user => {return { name: user.name, age: user.age };};

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

（js式）


const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

説明する

同じ答えがここにあります！

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

Rusty 2019-10-03 03:11.

問題：

あなたがしているとき：

p => {foo: "bar"}

JavaScriptインタープリターは、マルチステートメントコードブロックを開いていると見なし、そのブロックで、returnステートメントについて明示的に言及する必要があります。

解決：

あなたの場合は矢印の関数式があり、単一の文を、その後、次の構文を使用できます。

p => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"})

ただし、複数のステートメントが必要な場合は、次の構文を使用できます。

p => {return {foo: "bar", attr2: "some value", "attr3": "syntax choices"}}

上記の例では、中括弧の最初のセットはマルチステートメントコードブロックを開き、中括弧の2番目のセットは動的オブジェクト用です。矢印関数のマルチステートメントコードブロックでは、returnステートメントを明示的に使用する必要があります

詳細については、MozillaDocsでJS矢印関数式を確認してください。

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

メーガン・マークルは、自然な髪のスタイリングをめぐってマライア・キャリーと結ばれました

メーガン・マークルとマライア・キャリーが自然な髪の上でどのように結合したかについて、メーガンの「アーキタイプ」ポッドキャストのエピソードで学びましょう.

2022-12-23.

ハリー王子は家族との関係を修復できるという「希望を持っている」：「彼は父親と兄弟を愛している」

ハリー王子が家族、特にチャールズ王とウィリアム王子との関係について望んでいると主張したある情報源を発見してください。

2022-12-17.

ワイノナ・ジャッドは、パニックに陥った休暇の瞬間に、彼女がジャッド家の家長であることを認識しました

ワイノナ・ジャッドが、母親のナオミ・ジャッドが亡くなってから初めての感謝祭のお祝いを主催しているときに、彼女が今では家長であることをどのように認識したかを学びましょう.

2022-12-09.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナ島のジェイコブズラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

2022-09-08.

世界最小のマルチツールを15ドルでキーチェーンに追加

爪| $ 15 | マルボロ＆ケインザクロー| $ 15 | Malboro＆Kane世界最小のマルチツールであるTheClawをたった15ドルで手に入れましょう。男の子と一緒に冷たいものを割って開けたり、ネジを締めたり、Amazonパッケージを細断したりする場合でも、この悪い男の子はこれまでで最も便利な製品の1つです。

2023-03-20 14:32.

42,000試合で作られた球がスローモーションで燃えるのを見るのは魅力的な光景です

人が2つのマッチを接着するように導くものは何ですか？何があなたをマッチに打ち続け、構造が湾曲していることを発見するのですか？42,000のボールを作るまで、試合を続けなければならない理由は何ですか？しかし、何よりも、これほど魅力的なショーである可能性はどのようにありますか？私はあなたをだますつもりはありません、次に私たちがあなたに残すのは、あなたや私のような人が自由な時間を過ごすことを決定するビデオですボールを作るために必要な試合数を確認します（答えは42です。

2023-03-20 14:30.