pass - object destructuring javascript

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

Question

Por ejemplo si tengo dos objetos:

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

y

var oof = {}

y quería transferir los valores x e y de foo a oof. ¿Hay alguna manera de hacerlo usando la sintaxis de desestructuración es6?

tal vez algo como:

oof{x,y} = foo

Answer 1

Complemento BabelJS

Si está utilizando BabelJS ahora puede activar mi complemento babel-plugin-transform-object-from-destructuring ( consulte el paquete npm para la instalación y el uso ).

Tuve el mismo problema descrito en este hilo y para mí fue muy agotador cuando creas un objeto a partir de una expresión destructiva, especialmente cuando tienes que cambiar el nombre, agregar o eliminar una propiedad. Con este complemento, mantener tales escenarios se vuelve mucho más fácil para usted.

Ejemplo de objeto

let myObject = {
  test1: "stringTest1",
  test2: "stringTest2",
  test3: "stringTest3"
};
let { test1, test3 } = myObject,
  myTest = { test1, test3 };

Se puede escribir como:

let myTest = { test1, test3 } = myObject;

Ejemplo de matriz

let myArray = ["stringTest1", "stringTest2", "stringTest3"];
let [ test1, , test3 ] = myArray,
  myTest = [ test1, test3 ];

Se puede escribir como:

let myTest = [ test1, , test3 ] = myArray;

Answer 2

Aparte de Object.assign existe la sintaxis de propagación de objetos, que es una propuesta de Etapa 2 para ECMAScript.

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

var oof = { z: "z" }

oof =  {...oof, ...foo }

console.log(oof)

/* result 
{
  "x": "bar",
  "y": "baz",
  "z": "z"
}
*/

Pero para usar esta función, necesita usar el plugin stage-2 o transform-object-rest-spread para babel. Aquí hay una demostración en babel con stage-2

Answer 3

Es totalmente posible Simplemente no en una declaración.

var foo = {
    x: "bar",
    y: "baz"
};
var oof = {};
({x: oof.x, y: oof.y} = foo); // {x: "bar", y: "baz"}

(Tenga en cuenta el paréntesis en torno a la declaración.) Pero tenga en cuenta que la legibilidad es más importante que el golf de código :).

Fuente: http://exploringjs.com/es6/ch_destructuring.html#sec_assignment-targets

Answer 4

Esta es la solución más legible y corta que se me ocurrió:

let props = { 
  isValidDate: ''yes'',
  badProp: ''no!'',
};

let { isValidDate } = props;
let newProps = { isValidDate };

console.log(newProps);

{ isValidDate: ''yes'' }

Sería bueno algún día poder decir algo como let newProps = ({ isValidDate } = props) pero desafortunadamente no es algo compatible con ES6.

Answer 5

Esto es una especie de trampa, pero puedes hacer algo como esto ...

const originalObject = {
  hello: ''nurse'',
  meaningOfLife: 42,
  your: ''mom'',
};

const partialObject = (({ hello, your }) => {
  return { hello, your };
})(originalObject);

console.log(partialObject); // ​​​​​{ hello: ''nurse'', your: ''mom'' }​​​​​

En la práctica, creo que raramente querrás usar eso. Lo siguiente es MUCHO más claro ... pero no tan divertido.

const partialObject = {
  hello: originalObject.hello,
  your: originalObject.your,
};

Otra ruta completamente diferente, que incluye mucking con el prototipo (cuidado ahora ...):

if (!Object.prototype.pluck) {
  Object.prototype.pluck = function(...props) {
    return props.reduce((destObj, prop) => {
      destObj[prop] = this[prop];

      return destObj;
    }, {});
  }
}

const originalObject = {
  hello: ''nurse'',
  meaningOfLife: 42,
  your: ''mom'',
};

const partialObject2 = originalObject.pluck(''hello'', ''your'');

console.log(partialObject2); // { hello: ''nurse'', your: ''mom'' }

Answer 6

Esto funciona en cromo 53.0.2785.89

let foo = {
  x: "bar",
  y: "baz"
};

let oof = {x, y} = foo;

console.log(`oof: ${JSON.stringify(oof)});

//prints
oof: {
  "x": "bar",
  "y": "baz"
}

Answer 7

No es una manera hermosa, ni la recomiendo, pero es posible de esta manera, solo por conocimiento.

const myObject = {
  name: ''foo'',
  surname: ''bar'',
  year: 2018
};

const newObject = [''name'', ''surname''].reduce(
  (prev, curr) => (prev[curr] = myObject[curr], prev),
  {},
);

console.log(JSON.stringify(newObject)); // {"name":"foo","surname":"bar"}

Answer 8

No, la desestructuración no admite expresiones de miembros en shorthands, sino solo nombres de propiedad simples en el momento actual. Se ha hablado de eso en esdiscuss, pero ninguna propuesta llegará a ES6.

Object.assign embargo, es posible que pueda usar Object.assign : si no necesita todas las propiedades propias, aún puede hacerlo

var foo = …,
    oof = {};
{
    let {x, y} = foo;
    Object.assign(oof, {x, y})
}

Answer 9

Puede destruir un objeto asignando directamente a otro atributo de objeto.

Ejemplo de trabajo:

let user = {};
[user.name, user.username] = "".split('' '');
document.write(`
1st attr: ${user.name} <br /> 
2nd attr: ${user.username}`);

Puede trabajar con la destrucción utilizando variables con el mismo nombre de atributo de objeto que desea capturar, de esta manera no necesita hacerlo:

let user = { name: ''Mike'' }
let { name: name } = user;

Use de esta manera:

let user = { name: ''Mike'' }
let { name } = user;

De la misma manera, puede establecer nuevos valores para las estructuras de objetos si tienen el mismo nombre de atributo.

Mira este ejemplo de trabajo:

// The object to be destructed
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// Destructing
let {width: w, height: h, title} = options;

// Feedback
document.write(title + "<br />");  // Menu
document.write(w + "<br />");      // 100
document.write(h);                 // 200

Answer 10

Puede devolver el objeto desestructurado en una función de flecha y usar Object.assign () para asignarlo a una variable.

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

const oof = Object.assign({}, () => ({ x, y } = foo));

Answer 11

Puede usar la reestructuración para eso de esta manera:

const foo = {x:"a", y:"b"};
const {...oof} = foo; // {x:"a", y:"b"} 

O combine ambos objetos si oof tiene valores:

const foo = {x:"a", y:"b"};
let oof = {z:"c"}
oof = Object.assign({}, oof, foo)

Answer 12

Puede usar métodos de clase JSON para lograrlo de la siguiente manera

const foo = { x: "bar", y: "baz" }; const oof = JSON.parse(JSON.stringify(foo, [''x'',''y''])); // output -> {x: "bar", y: "baz"}

Pase las propiedades que deben agregarse al objeto resultante como segundo argumento para stringify función en un formato de matriz.

MDN Doc para JSON.stringify

Answer 13

Refiriéndose a la regla "Preferir la desestructuración de matrices y objetos (preferir la desestructuración)" en https://eslint.org/docs/rules/prefer-destructuring, esto también es posible:

// define object let foo; // destructing ({ foo } = object);

Answer 14

SECO

var a = {a1:1, a2: 2, a3: 3};
var b = {b1:1, b2: 2, b3: 3};

const newVar = (() => ({a1, a2, b1, b2})).bind({...a, ...b});
const val = newVar();
console.log({...val});
// print: Object { a1: 1, a2: 2, b1: 1, b2: 2 }

o

console.log({...(() => ({a1, a2, b1, b2})).bind({...a, ...b})()});

Answer 15

Se me ocurrió este método:

exports.pick = function pick(src, props, dest={}) {
    return Object.keys(props).reduce((d,p) => {
        if(typeof props[p] === ''string'') {
            d[props[p]] = src[p];
        } else if(props[p]) {
            d[p] = src[p];
        }
        return d;
    },dest);
};

Que puedes usar así:

let cbEvents = util.pick(this.props.events, {onFocus:1,onBlur:1,onCheck:''onChange''});
let wrapEvents = util.pick(this.props.events, {onMouseEnter:1,onMouseLeave:1});

es decir, puede elegir qué propiedades desea y colocarlas en un nuevo objeto. A diferencia de _.pick , también puede cambiarles el nombre al mismo tiempo.

Si desea copiar los accesorios en un objeto existente, simplemente configure el dest .

Answer 16

Si bien feo y un poco repetitivo, puedes hacer

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

que leerá los dos valores del objeto foo y los escribirá en sus ubicaciones respectivas en el objeto oof .

Personalmente prefiero leer

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

o

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

aunque.

Answer 17

OMI, 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, desestructurar en variables y luego usar la abreviatura inicializador para hacer un nuevo objeto. No hay necesidad de Object.assign

Creo que esta es la forma más legible, de todos modos. Por la presente, puede seleccionar los accesorios exactos de someObject que desee. Si tiene un objeto existente en el que solo desea fusionar los accesorios, haga 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 algunos datos discretos. Pero, estoy de acuerdo en que debería haber una línea para hacer esto.