화살표 함수에서 객체를 반환 할 때는 문법의 모호성 때문에 추가 키워드 {}와 return키워드 를 사용해야 할 것 같습니다 .

그 말은 내가 쓸 수 없습니다 p => {foo: "bar"}만 작성해야합니다 p => { return {foo: "bar"}; }.

화살표 기능은 객체 이외의 아무것도 반환하는 경우 {}와는 return, 예를 들어 불필요한 있습니다 p => "foo".

p => {foo: "bar"}을 반환합니다 undefined.

수정 A는 p => {"foo": "bar"}발생 " SyntaxError: 예기치 않은 토큰 ' :'" .

내가 놓친 것이 분명합니까?

반환하는 객체 리터럴을 괄호로 묶어야합니다. 그렇지 않으면 중괄호가 함수 본문을 나타내는 것으로 간주됩니다. 다음과 같이 작동합니다.

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

다른 표현식을 괄호로 묶을 필요는 없습니다.

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

등등.

참조 : MDN-객체 리터럴 반환

왜 구문이 유효한지 궁금하지만 예상대로 작동하지 않을 수 있습니다.

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

JavaScript의 레이블 구문 때문입니다 .

따라서 위 코드를 ES5로 변환하면 다음과 같아야합니다.

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

화살표 함수의 본문이 중괄호로 싸여 있으면 암시 적으로 반환되지 않습니다. 개체를 괄호로 묶습니다. 이런 식으로 보일 것입니다.

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

본문을 괄호로 묶으면 함수가을 반환 { foo: 'bar }합니다.

바라건대, 그것은 당신의 문제를 해결합니다. 그렇지 않다면 최근에 Arrow 함수에 대해 자세히 다루는 기사를 썼습니다. 도움이 되셨기를 바랍니다. 자바 스크립트 화살표 함수

올바른 방법

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}

2. (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

발행물:

당신이 할 때 :

p => {foo: "bar"}

JavaScript 인터프리터는 다중 문 코드 블록을 열고 있다고 생각하며 해당 블록에서 명시 적으로 return 문을 언급해야합니다.

해결책:

귀하의 경우 화살표 함수 표현식이 가 하나의 문을 , 당신은 다음과 같은 구문을 사용할 수 있습니다 :

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

그러나 여러 문장 을 원할 경우 다음 구문을 사용할 수 있습니다.

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

위의 예에서 첫 번째 중괄호 세트는 다중 문 코드 블록을 열고 두 번째 중괄호 세트는 동적 객체를위한 것입니다. 다중 문 코드 화살표 함수에서는 return 문을 명시 적으로 사용해야합니다.

자세한 내용은 Mozilla Docs에서 JS Arrow Function Expressions를 확인하십시오.

더 많은 맞춤형 솔루션을 위해 언제든지 이것을 확인할 수 있습니다.

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