javascript - una - ECMAScript 6 función de flecha que devuelve un objeto

sintaxis funcion flecha

Question

Al devolver un objeto desde una función de flecha, parece que es necesario usar un conjunto adicional de {} y una palabra clave de return debido a una ambigüedad en la gramática.

Eso significa que no puedo escribir p => {foo: "bar"} , pero tengo que escribir p => { return {foo: "bar"}; } p => { return {foo: "bar"}; } .

Si la función de flecha devuelve algo que no sea un objeto, {} y return son innecesarios, por ejemplo: p => "foo" .

p => {foo: "bar"} devuelve undefined .

Un p => {"foo": "bar"} SyntaxError arroja “ SyntaxError : token inesperado: '' : ''” .

¿Hay algo obvio que me estoy perdiendo?

Answer 1

las formas correctas

1. objeto de retorno normal

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

2. (expresiones js)

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

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

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

explique

¡La misma respuesta se puede encontrar aquí!

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

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

Answer 2

Problema:

Cuando lo estás haciendo:

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

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

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

El intérprete de JavaScript cree que está abriendo un bloque de código de varias instrucciones, y en ese bloque, debe mencionar explícitamente una declaración de devolución.

Solución:

Si la expresión de la función de flecha tiene una sola instrucción , puede usar la siguiente sintaxis:

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

Pero si desea tener varias declaraciones , puede usar la siguiente sintaxis:

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

En el ejemplo anterior, el primer conjunto de llaves abre un bloque de código de varias instrucciones, y el segundo conjunto de llaves es para objetos dinámicos. En el bloque de código de múltiples declaraciones de la función de flecha, debe usar explícitamente las declaraciones de retorno

Para obtener más detalles, consulte Mozilla Docs para las expresiones de la función de flecha JS

Answer 3

Debe ajustar el objeto de retorno literal entre paréntesis. De lo contrario, se considerará que las llaves indican el cuerpo de la función. Los siguientes trabajos:

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

No necesita incluir ninguna otra expresión entre paréntesis:

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

y así.

Referencia: MDN - Devolver literales de objeto

Answer 4

Quizás se pregunte por qué la sintaxis es válida (pero no funciona como se esperaba):

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

Se debe a la sintaxis de la etiqueta de JavaScript :

Entonces, si transpila el código anterior a ES5, debería verse así:

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

Answer 5

Si el cuerpo de la función de flecha está envuelto en llaves, no se devuelve implícitamente. Envuelva el objeto entre paréntesis. Se vería algo así.

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

Al envolver el cuerpo en parens, la función devolverá { foo: ''bar } .

Con suerte, eso resuelve tu problema. Si no, recientemente escribí un artículo sobre las funciones de Arrow que lo cubre con más detalle. Espero que le sea útil. Funciones de flecha de Javascript

Answer 6

Siempre puede consultar esto para obtener más soluciones personalizadas:

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