Función de flecha ECMAScript 6 que devuelve un objeto

620

Al devolver un objeto desde una función de flecha, parece que es necesario usar un conjunto adicional de {}y una returnpalabra clave 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"}; }.

Si la función devuelve flecha otra cosa que no sea un objeto, el {}y returnno son necesarios, por ejemplo: p => "foo".

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

Un p => {"foo": "bar"}lanzamiento modificado " SyntaxError: token inesperado: ' :'" .

¿Hay algo obvio que me estoy perdiendo?

jkschneider
fuente

Respuestas:

1108

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

alexpods
fuente
77
Tengo curiosidad por qué los padres hacen la diferencia.
wrschneider
40
@wrschneider porque sin parens js parser piensa que es un cuerpo funcional, no un objeto, y foo es una etiqueta
alexpods
21
@wrschneider más específicamente, en términos de nodos AST, el uso de paréntesis denota una declaración de expresión, en la que puede existir una expresión de objeto, mientras que, de forma predeterminada, las llaves se interpretan como una declaración de bloque.
Patrick Roberts
55
Ni idea de por qué esto funciona, pero si desea utilizar el valor de ptan clave para el objeto literal, así es como se hace: p => ({ [p]: 'bar' }). Sin el [], será undefinedo literalmente la letra p.
DanMan
1
@DanMan Se llama propiedades calculadas y es una característica de los literales de objetos.
D. Pardal
62

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!
}
Petr Odut
fuente
55
Las etiquetas son una característica rara vez utilizada y esotérica. ¿REALMENTE tienen algún valor? Siento que deberían ser obsoletos y eventualmente eliminados.
Kenmore
@ Kenmore Vea stackoverflow.com/questions/55934490/… - compatibilidad con versiones anteriores. Los navegadores se negarán a implementar una función que rompa los sitios existentes
CertainPerformance
@ Kenmore puede salir de los bucles anidados si están etiquetados. No se usa con frecuencia, pero definitivamente es útil.
Petr Odut
17

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 volverá { 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

Paul McBride
fuente
2

las formas correctas

  1. objeto de retorno normal

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. (expresiones js)

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

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

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

explique

imagen

¡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

xgqfrms
fuente
1

Problema:

Cuando lo estás haciendo:

p => {foo: "bar"}

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 su expresión de 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

Oxidado
fuente
-2

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

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