¿Es posible desestructurar sobre un objeto existente? (JavaScript ES6)

Resuelto tnrich asked hace 9 años • 17 respuestas

Por ejemplo, si tengo dos objetos:

var foo = {
  x: "bar",
  y: "baz"
}

y

var oof = {}

y quería transferir los valores de xey de fooa oof. ¿Hay alguna manera de hacerlo utilizando la sintaxis de desestructuración de ES6?

Quizás algo como:

oof{x,y} = foo
tnrich avatar Apr 14 '15 13:04 tnrich
Aceptado

Aunque es feo y un poco repetitivo, puedes hacerlo.

({x: oof.x, y: oof.y} = foo);

que leerá los dos valores del fooobjeto y los escribirá en sus respectivas ubicaciones en el oofobjeto.

Personalmente prefiero leer

oof.x = foo.x;
oof.y = foo.y;

o

['x', 'y'].forEach(prop => oof[prop] = foo[prop]);

aunque.

loganfsmyth avatar Nov 16 '2016 05:11 loganfsmyth

En mi opinión, esta es la forma más fácil de lograr lo que estás buscando:

let { prop1, prop2, prop3 } = someObject;
let data = { prop1, prop2, prop3 };

  // data === { prop1: someObject.prop1, ... }

Básicamente, desestructura en variables y luego usa la abreviatura del inicializador para crear un nuevo objeto. No hay ninguna necesidad de Object.assign.

De todos modos, creo que esta es la forma más legible. Por la presente puede seleccionar los accesorios exactos que someObjectdesee. Si tienes un objeto existente en el que solo deseas fusionar los accesorios, haz algo como esto:

let { prop1, prop2, prop3 } = someObject;
let data = Object.assign(otherObject, { prop1, prop2, prop3 });
    // Makes a new copy, or...
Object.assign(otherObject, { prop1, prop2, prop3 });
    // Merges into otherObject

Otra forma, posiblemente más limpia, de escribirlo es:

let { prop1, prop2, prop3 } = someObject;
let newObject = { prop1, prop2, prop3 };

// Merges your selected props into otherObject
Object.assign(otherObject, newObject);

Lo uso mucho para solicitudes POST donde solo necesito unos pocos datos discretos. Pero estoy de acuerdo en que debería haber una sola línea para hacer esto.

PD:

¡Recientemente aprendí que puedes usar la ultradesestructuración en el primer paso para extraer valores anidados de objetos complejos! Por ejemplo...

let { prop1,
      prop2: { somethingDeeper },
      prop3: {
         nested1: {
            nested2
         }
      } = someObject;
let data = { prop1, somethingDeeper, nested2 };

Además, puedes usar el operador de extensión en lugar de Object.assign al crear un nuevo objeto:

const { prop1, prop2, prop3 } = someObject;
let finalObject = {...otherObject, prop1, prop2, prop3 };

O...

const { prop1, prop2, prop3 } = someObject;
const intermediateObject = { prop1, prop2, prop3 };
const finalObject = {...otherObject, ...intermediateObject };
Zfalen avatar Jun 23 '2017 18:06 Zfalen

No, la desestructuración no admite expresiones de miembros abreviadas, sino solo nombres de propiedades simples en este momento. Se ha hablado de ello en ES Discuss , pero ninguna propuesta llegará a ES6.

Es posible que puedas utilizarlo Object.assignsin embargo. Si no necesita todas las propiedades propias, aún puede hacerlo:

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}
Bergi avatar Apr 14 '2015 07:04 Bergi