web-dev-qa-db-ja.com

オブジェクトを返すECMAScript 6の矢印関数

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

それは私がp => {foo: "bar"}を書くことができないがp => { return {foo: "bar"}; }を書かなければならないことを意味します。

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

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

修正されたp => {"foo": "bar"}は 「SyntaxError：予期しないトークン： ':'」をスローします 。

私が見逃している明白な何かはありますか？

javascriptecmascript-6arrow-functions
533
jkschneider

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

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

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

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

等々。

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

957
alexpods

あなたは不思議に思うかもしれません、なぜシンタックスが有効であるのか（しかし期待通りに動かないのか）：

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

JavaScriptのラベル構文 ：

したがって、上記のコードをES5に変換すると、次のようになります。

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

Arrow関数の本体が中括弧で囲まれている場合、それは暗黙的には返されません。オブジェクトを括弧で囲みます。それはこのように見えるでしょう。

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

本体を括弧で囲むことで、この関数は{ foo: 'bar }を返します。

うまくいけば、それはあなたの問題を解決します。そうでなければ、私は最近それをより詳細にカバーするArrow関数についての記事を書きました。私はあなたがそれが役に立つと思うことを願っています。 Javascriptの矢印機能

12
Paul McBride

正しい方法

  1. 通常の戻りオブジェクト

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

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

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}
  1. （js式）

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

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

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

説明する

image

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

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

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

0
xgqfrms

より多くのカスタムソリューションについては、これをいつでも確認できます。

x => ({}[x.name] = x);
0
SirtusKottus