javascript - desestructuración - ¿Cómo desestructurar en variables dinámicamente nombradas en ES6?

destructuring javascript

Question

Supongamos que tengo el siguiente objeto:

const user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

Y que solo quiero el id y fullName .

Haré lo siguiente:

const { id, fullName } = user

Easy-peasy, ¿verdad?

Ahora supongamos que quiero hacer la desestructuración en función del valor de otra variable llamada fields .

const fields = [ ''id'', ''fullName'' ]

Ahora mi pregunta es: ¿Cómo puedo realizar una desestructuración basada en una matriz de claves?

Desafortunadamente probé lo siguiente sin éxito:

let {[{...fields}]} = user y let {[...fields]} = user . ¿Hay alguna manera de que esto se pueda hacer?

Gracias

Answer 1

Como se mencionó anteriormente, no puede destruirse en variables dinámicamente nombradas en JavaScript sin usar eval.

Pero puede obtener un subconjunto del objeto dinámicamente, usando la función de reducción de la siguiente manera:

const destruct = (keys, obj) => 
  keys.reduce((a, c) => ({ ...a, [c]: obj[c] }), {});

const object = { 
  color: ''red'',
  size: ''big'',
  amount: 10,
};

const subset = destruct([''color'', ''amount''], object);
console.log(subset);

Answer 2

No es imposible destruir con una clave dinámica. Para evitar el problema de crear variables dinámicas (como mencionó Ginden), debe proporcionar alias.

const user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

const fields = [ ''id'', ''fullName'' ];
const object = {};

const {[fields[0]]: id, [fields[1]]: fullName} = user;

console.log(id); // 42
console.log(fullName); // { firstName: "John", lastName: "Doe" }

Para solucionar el problema de tener que definir alias estáticos para valores dinámicos, puede asignar a las propiedades dinámicas de un objeto. En este sencillo ejemplo, esto es lo mismo que revertir toda la desestructuración, aunque :)

const user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

const fields = [ ''id'', ''fullName'' ];
const object = {};

({[fields[0]]: object[fields[0]], [fields[1]]: object[fields[1]]} = user);

console.log(object.id); // 42
console.log(object.fullName); // { firstName: "John", lastName: "Doe" }

fuentes:

• https://twitter.com/ydkjs/status/699845396084846592

• https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md#not-just-declarations

Answer 3

Respuesta corta: es imposible y no será posible.

Razonamiento detrás de esto: introduciría nuevas variables dinámicamente nombradas en el alcance del bloque, siendo efectivamente eval dinámica, deshabilitando así cualquier optimización de rendimiento. La eval dinámica que puede modificar el alcance en vuelo siempre se consideró extremadamente peligrosa y se eliminó del modo estricto ES5.

Más aún, sería un olor de código: al hacer referencia a variables indefinidas, se emite ReferenceError , por lo que necesitaría más código repetitivo para manejar de manera segura dicho alcance dinámico.