Ad esempio se ho due oggetti:

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

e

var oof = {}

e volevo trasferire i valori xey da foo a oof. C'è un modo per farlo usando la sintassi destrutturante es6?

forse qualcosa del tipo:

oof{x,y} = foo

Mentre brutto e un po 'ripetitivo, puoi farlo

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

che leggerà i due valori foodell'oggetto e li scriverà nelle rispettive posizioni oofsull'oggetto.

Personalmente preferirei ancora leggere

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

o

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

anche se.

No, la destrutturazione non supporta le espressioni dei membri in shorthands ma solo semplici nomi di proprietà al momento. Si è parlato di questo su esdiscuss, ma nessuna proposta entrerà in ES6.

Object.assignTuttavia, potresti essere in grado di utilizzare : se non hai bisogno di tutte le proprietà, puoi comunque farlo

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

IMO questo è il modo più semplice per realizzare ciò che stai cercando:

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

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

Fondamentalmente, distruggere in variabili e quindi utilizzare la scorciatoia di inizializzazione per creare un nuovo oggetto. Non c'è bisogno diObject.assign

Penso che questo sia il modo più leggibile, comunque. Con la presente puoi selezionare i puntelli esatti tra someObjectquelli che desideri. Se hai un oggetto esistente in cui vuoi solo unire gli oggetti di scena, fai qualcosa del genere:

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

Un altro modo, probabilmente più pulito, per scriverlo è:

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

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

Lo uso molto per POSTrichieste in cui ho bisogno solo di alcuni dati discreti. Ma, sono d'accordo che ci dovrebbe essere un solo aspetto per farlo.

EDIT: PS - Recentemente ho imparato che puoi usare l'ultra destrutturazione nel primo passo per estrarre i valori nidificati da oggetti complessi! Per esempio...

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

Inoltre, è possibile utilizzare l'operatore spread anziché Object.assign quando si crea un nuovo oggetto:

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 };

Oltre a ciò Object.assignc'è la sintassi di diffusione dell'oggetto che è una proposta Stage 2 per ECMAScript.

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

var oof = { z: "z" }

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

console.log(oof)

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

Ma per usare questa funzione devi usare stage-2o transform-object-rest-spreadplugin per babel. Ecco una demo di Babel constage-2

Plugin BabelJS

Se stai usando BabelJS ora puoi attivare il mio plugin babel-plugin-transform-object-from-destructuring( vedi pacchetto npm per l'installazione e l'uso ).

Ho avuto lo stesso problema descritto in questo thread e per me è stato molto estenuante quando si crea un oggetto da un'espressione destrutturante, soprattutto quando è necessario rinominare, aggiungere o rimuovere una proprietà. Con questo plugin mantenere tali scenari diventa molto più facile per te.

Esempio di oggetto

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

può essere scritto come:

let myTest = { test1, test3 } = myObject;

Esempio di array

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

può essere scritto come:

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

È totalmente possibile. Solo non in una dichiarazione.

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

(Nota la parentesi attorno alla frase.) Ma tieni presente che la leggibilità è più importante del golf di codice :).

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

Puoi semplicemente usare la ristrutturazione per questo in questo modo:

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

O unisci entrambi gli oggetti se oof ha valori:

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

È possibile restituire l'oggetto destrutturato in una funzione freccia e utilizzare Object.assign () per assegnarlo a una variabile.

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

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

ASCIUTTO

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})()});

È possibile distruggere un oggetto assegnando direttamente a un altro attributo oggetto.

Esempio funzionante:

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

Puoi lavorare con la distruzione usando le variabili con lo stesso nome dell'attributo oggetto che vuoi catturare, in questo modo non devi fare:

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

Usa in questo modo:

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

Allo stesso modo è possibile impostare nuovi valori per le strutture degli oggetti se hanno lo stesso nome di attributo.

Guarda questo esempio funzionante:

// 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

Funziona in Chrome 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"
}

Ho escogitato questo metodo:

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);
};

Che puoi usare in questo modo:

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

cioè, puoi scegliere quali proprietà vuoi estrarre e inserirle in un nuovo oggetto. diversamente da_.pick di puoi anche rinominarli contemporaneamente.

Se vuoi copiare gli oggetti di scena su un oggetto esistente, basta impostare l' destarg.

Questo è un po 'barare, ma puoi fare qualcosa del genere ...

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

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

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

In pratica, penso che raramente vorresti usarlo. Quanto segue è MOLTO più chiaro ... ma non altrettanto divertente.

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

Un altro percorso completamente diverso, che include il mucking con il prototipo (attenzione ora ...):

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' }

Questa è la soluzione più leggibile e più breve che potrei trovare:

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

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

console.log(newProps);

Verrà emesso { isValidDate: 'yes' }

Sarebbe bello poter un giorno dire qualcosa del genere, let newProps = ({ isValidDate } = props)ma sfortunatamente non è qualcosa che ES6 supporta.

Non è un modo bellissimo, né lo consiglio, ma è possibile in questo modo, solo per conoscenza.

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"}

È possibile utilizzare i metodi della classe JSON per ottenerlo come segue

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

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

Passare le proprietà che devono essere aggiunte all'oggetto risultante come secondo argomento per stringifyfunzionare in un formato array.

MDN Doc per JSON.stringify