¿Puede alguien explicarme por qué esta es la única versión que he probado que funciona para copiar el estado con es6 y agregar otro campo, de las otras formas probadas que se enumeran a continuación? :
const values = [{key: "1", val: "one"}, {key: "2", val: "two"}]; var works = values.map(v => { return { ...v, extra: "stuff" } })Y todos estos producen estos errores:
//Unexpected token '...' var notWorks1 = values.map(v => ...v, extra: "stuff"); // Rest parameter must be last formal parameter var notWorks2 = values.map(v => {...v, extra: "stuff"}) // Rest parameter must be last formal parameter var notWorks3 = values.map(v => { { ...v, extra: "stuff" } }) // unexpected token 'return' var notWorks4 = values.map(v => return { ...v, extra: "stuff" } ) // unexpected 'return' var notWorks5 = values.map(v => return ...v, extra: "stuff");Pensé que la flecha era un retorno implícito (ver los primeros 3 intentos).
¿Es esa primera forma la única sintaxis que se puede usar? Si hay otros, me gustaría saberlo, ya que estoy tratando de practicar y aprender varias opciones... y quiero la opción más concisa y pequeña (una línea).
La respuesta de @Bulent es correcta, pero me gustaría agregar más información:
//Unexpected token '...' var notWorks1 = values.map(v => ...v, extra: "stuff");
Esta sintaxis no tiene sentido. Como dice @Bulent, la sintaxis extendida ( ... ) solo se puede usar dentro de literales de objeto ( { ...v } ), literales de matriz ( [ ...v ] , solo si v es una matriz) o llamadas de función ( f( ...v ) , nuevamente solo si v es una matriz).
// Rest parameter must be last formal parameter var notWorks2 = values.map(v => {...v, extra: "stuff"})
El problema aquí es que en JavaScript las llaves ( { , } ) tienen dos funciones: ya sea para objetos literales, como está tratando de usar aquí, pero también para bloques de código, por ejemplo, alrededor del cuerpo de una función. En este caso, JavaScript espera que las llaves sean el cuerpo de la función de flecha. Lo que hay que hacer es cambiar el contexto para que se espere una expresión (que es un objeto literal). Esto se puede hacer, por ejemplo, poniendo el objeto literal entre corchetes:
var notWorks2 = values.map(v => ({...v, extra: "stuff"}))// Rest parameter must be last formal parameter var notWorks3 = values.map(v => { { ...v, extra: "stuff" } })
Nuevamente, el primer par de llaves se considera un bloque (cuerpo de función), y dentro de un bloque se espera que las llaves sean otro bloque. Esta vez, envolver el objeto literal entre corchetes no haría nada, porque una expresión por sí sola no hace nada dentro del cuerpo de una función. En su lugar, debe usar return .
// unexpected token 'return' var notWorks4 = values.map(v => return { ...v, extra: "stuff" } )
Las funciones de flecha pueden consistir en una expresión (sin llaves) o en un bloque de cuerpo de función (con llaves). Una declaración de return no es una expresión, por lo que esto no funciona. Las declaraciones de return solo se pueden usar dentro de un bloque de cuerpo de función.
Un punto final: evite usar var . Está desactualizado. Usa const o let en su lugar.
la sintaxis de propagación se usa en una matriz u objeto. Así que tienes que ponerlo entre {} o [].
{} se compilan como si pertenecieran a la función de flecha, no a un objeto.
Cuando ingresa su código en {}, debe devolver el resultado.
Para usar la función de retorno en flecha, necesita ponerlo entre {}
Lo mismo que 4.