javascript - ¿Qué funciona la flecha con un() después de los medios?

ecmascript-6

Question

Esta pregunta ya tiene una respuesta aquí:

• ECMAScript 6 función de flecha que devuelve un objeto 6 respuestas

const actionsMap = {
  [GET_USER]: (state, action) => ({ post: action.msg })
};

Tengo este código con el que me he topado. Todo el tiempo que he estado trabajando con funciones de flecha que he visto en un formato {}, ¿qué significa este contenedor ()?

Answer 1

Con las funciones de flecha, puede usar una sola declaración o un bloque como cuerpo de la función. Estos dos son equivalentes:

() => foo
() => {
  return foo;
}

En su ejemplo, si la lambda se definió como () => {post: action.msg} el objeto ( {} ) se interpretaría como un bloque de cuerpo en lugar de un objeto. El tiempo de ejecución intentaría analizarlo como un equivalente a:

function () {
  post: action.msg
}

que es una etiqueta con nombre y acceso a la propiedad, y no tiene mucho sentido aquí. Al envolver en parens, le insinúa al analizador que es una expresión a evaluar y que la función de flecha gruesa rige en los cuerpos de expresión única, lo que lo hace equivalente a:

function () {
  return {post: action.msg};
}

Para evitar las reglas de expresión única cuando desee hacer dos cosas relacionadas (ocasionalmente útiles en algoritmos de mapa / reducción), puede usar parens para agrupar un par de expresiones:

foo.reduce((p, c) => (c.counted = true, p += c.value));

Esto establecerá la propiedad counted de c , antes de agregar c.value a p y devolver el resultado de p += c.value como el nuevo valor de p .

Los paréntesis envuelven una expresión en ECMAScript y se pueden usar, con el operador de coma, para agrupar varias expresiones. Los resultados de la última expresión se devuelven cuando se evalúa el grupo.

Por ejemplo:

var i = 0, j = 0;
console.log((j += 10, i += 2), j);

imprimirá 2 10 , ya que j se incrementa en el grupo () y se imprime más tarde.

Answer 2

De https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Returning_object_literals

Devolver literales de objeto

Tenga en cuenta que devolver literales de objetos utilizando la sintaxis concisa params => {object: literal} no funcionará como se esperaba:

var func = () => {foo: 1}; // ¡Llamar a func () devuelve undefined! var func = () => {foo: function () {}}; // SyntaxError: la declaración de función requiere un nombre

Esto se debe a que el código entre llaves ({}) se analiza como una secuencia de declaraciones (es decir, foo se trata como una etiqueta, no como una clave en un objeto literal).

Recuerde envolver el objeto literal entre paréntesis:

var func = () => ({foo: 1});

entonces ... si quieres devolver un objeto literal, envuélvelo en ()

Answer 3

Esta es la función de flecha ES6. Más para leer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ES6

(state, action) => ({ post: action.msg })

ES5

function(state, action) {
   return { post: action.msg };
}