javascript - tag - title of page html
Desestructuración de objetos sin var (2)
¿Por qué la desestructuración de objetos arroja un error si no hay una palabra clave
var
frente a ella?
{a, b} = {a: 1, b: 2};
lanza
SyntaxError: expected expression, got ''=''
Los siguientes tres ejemplos funcionan sin problemas
var {a, b} = {a: 1, b: 2};
var [c, d] = [1, 2];
[e, f] = [1, 2];
Pregunta adicional: ¿Por qué no necesitamos una
var
para la desestructuración de la matriz?
Me encontré con el problema haciendo algo como
function () {
var {a, b} = objectReturningFunction();
// Now a and b are local variables in the function, right?
// So why can''t I assign values to them?
{a, b} = objectReturningFunction();
}
El problema surge de los
{...}
operadores que tienen múltiples significados en JavaScript.
Cuando
{
aparece al comienzo de una
Declaración
, siempre representará un
block
que no se puede asignar.
Si aparece más adelante en la
Declaración
como una
Expresión
, entonces representará un Objeto.
La
var
ayuda a hacer esta distinción, ya que no puede ir seguida de una
Declaración
, como lo hará el
paréntesis de agrupación
:
( {a, b} = objectReturningFunction() );
Desde sus documentos: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assignment_without_declaration
Notas: Los paréntesis (...) alrededor de la declaración de asignación son obligatorios cuando se usa la asignación de desestructuración literal de objetos sin una declaración.
{a, b} = {a: 1, b: 2} no es una sintaxis independiente válida, ya que {a, b} en el lado izquierdo se considera un bloque y no un objeto literal.
Sin embargo, ({a, b} = {a: 1, b: 2}) es válido, al igual que var {a, b} = {a: 1, b: 2}
Su expresión (...) debe estar precedida por un punto y coma o puede usarse para ejecutar una función en la línea anterior.
Si escribe JavaScript sin punto y coma , la sintaxis de ''asignación sin declaración'' debe ir precedida de un punto y coma para que funcione de manera predecible
let a, b
;({a, b} = objectReturningFunction()) // <-- note the preceding ;
Solo quería resaltar esto, ya que me sorprendió, y espero poder ahorrarles a otros un poco de tiempo para descubrir por qué no funciona y / o produce resultados extraños con formateadores de código, etc.
De hecho, en realidad está justo ahí en la respuesta aceptada (última línea de los documentos citados) pero es fácil pasarlo por alto, ¡especialmente sin ver un ejemplo!