Функция стрелки ECMAScript 6, которая возвращает объект

При возврате объекта из функции со стрелкой кажется, что необходимо использовать дополнительный набор {} и ключевое слово return из-за неоднозначности в грамматике.

Это означает, что я не могу написать p => {foo: "bar"}, но должен написать p => { return {foo: "bar"}; } p => { return {foo: "bar"}; }

Если функция стрелки возвращает что-либо кроме объекта, то {} и return не нужны, например: p => "foo".

p => {foo: "bar"} возвращает undefined.

Измененный p => {"foo": "bar"} выдает " SyntaxError: неожиданный токен: ' : '".

Есть что-то очевидное, чего мне не хватает?

Ответы

Ответ 1

Вы должны завернуть литерал возвращаемого объекта в круглые скобки. В противном случае фигурные скобки будут считаться обозначающими тело функций. Следующие работы:

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

Вам не нужно вставлять какое-либо другое выражение в круглые скобки:

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

и так далее.

Ссылка: MDN - Возвращаемые объектные литералы

Ответ 2

Вы можете задаться вопросом, почему синтаксис действителен (но не работает как ожидалось):

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

Это из-за синтаксис ярлыков JavaScript:

Итак, если вы переведёте вышеуказанный код на ES5, он должен выглядеть так:

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

Ответ 3

Если тело функции стрелки завернуто в фигурные скобки, оно не возвращается неявно. Оберните объект в круглые скобки. Это будет выглядеть примерно так.

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

Обернув тело в parens, функция вернет { foo: 'bar }.

Надеюсь, это решит вашу проблему. Если нет, я недавно написал статью о функциях Arrow, которая более подробно описывает ее. Надеюсь, вы сочтете это полезным. Функции Javascript Arrow

Ответ 4

правильные пути

  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/220

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

Ответ 5

Вопрос:

Когда вы делаете:

p => {foo: "bar"}

Интерпретатор JavaScript считает, что вы открываете блок кода с несколькими операторами, и в этом блоке вы должны явно указать оператор возврата.

Решение:

Если ваше выражение функции стрелки содержит одиночный оператор, вы можете использовать следующий синтаксис:

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

Но если вы хотите иметь несколько операторов, вы можете использовать следующий синтаксис:

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

В приведенном выше примере первый набор фигурных скобок открывает блок кода с несколькими утверждениями, а второй набор фигурных скобок предназначен для динамических объектов. В блоке кода с несколькими операторами функции стрелки вы должны явно использовать операторы возврата

Более подробную информацию смотрите в Документах Mozilla для выражений функций JS Arrow.

Ответ 6

Вы всегда можете проверить это для более индивидуальных решений:

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