Zum Beispiel, wenn ich zwei Objekte habe:

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

und

var oof = {}

und ich wollte die x- und y-Werte von foo nach oof übertragen. Gibt es eine Möglichkeit, dies mithilfe der es6-Destrukturierungssyntax zu tun?

vielleicht so etwas wie:

oof{x,y} = foo

Während hässlich und ein bisschen repetitiv, können Sie tun

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

Dadurch werden die beiden Werte des fooObjekts gelesen und an ihre jeweiligen Positionen auf dem oofObjekt geschrieben.

Persönlich würde ich immer noch lieber lesen

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

oder

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

obwohl.

Nein, die Destrukturierung unterstützt derzeit keine Mitgliedsausdrücke in Kurzform, sondern nur einfache Eigenschaftsnamen. Es gab Gespräche darüber auf esdiscuss, aber keine Vorschläge werden es in ES6 schaffen.

Möglicherweise können Sie Object.assignjedoch verwenden - wenn Sie nicht alle eigenen Eigenschaften benötigen, können Sie dies dennoch tun

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

IMO ist dies der einfachste Weg, um das zu erreichen, wonach Sie suchen:

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

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

Grundsätzlich in Strukturen zerlegen und dann die Initialisierungskürzel verwenden, um ein neues Objekt zu erstellen. Kein Bedarf fürObject.assign

Ich denke, das ist sowieso der am besten lesbare Weg. Hiermit können Sie genau die Requisiten auswählen, die someObjectSie möchten. Wenn Sie ein vorhandenes Objekt haben, in das Sie nur die Requisiten zusammenführen möchten, gehen Sie wie folgt vor:

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

Eine andere, wohl sauberere Art, es zu schreiben, ist:

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

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

Ich benutze dies häufig für POSTAnfragen, bei denen ich nur wenige diskrete Daten benötige. Aber ich stimme zu, dass es dafür einen Einzeiler geben sollte.

EDIT: PS - Ich habe kürzlich erfahren, dass Sie im ersten Schritt Ultra-Destrukturierung verwenden können, um verschachtelte Werte aus komplexen Objekten herauszuholen! Zum Beispiel...

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

Außerdem können Sie beim Erstellen eines neuen Objekts den Spread-Operator anstelle von Object.assign verwenden:

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

Oder...

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

Abgesehen von Object.assignder Objektverbreitungssyntax handelt es sich um einen Stage 2-Vorschlag für ECMAScript.

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

var oof = { z: "z" }

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

console.log(oof)

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

Um diese Funktion nutzen zu können, müssen Sie jedoch babel verwenden stage-2oder ein transform-object-rest-spreadPlugin verwenden. Hier ist eine Demo zu Babel mitstage-2

BabelJS Plugin

Wenn Sie BabelJS verwenden , können Sie jetzt mein Plugin aktivieren babel-plugin-transform-object-from-destructuring( Installation und Verwendung finden Sie im npm-Paket ).

Ich hatte das gleiche Problem, das in diesem Thread beschrieben wurde, und für mich war es sehr anstrengend, wenn Sie ein Objekt aus einem destrukturierenden Ausdruck erstellen, insbesondere wenn Sie eine Eigenschaft umbenennen, hinzufügen oder entfernen müssen. Mit diesem Plugin wird das Verwalten solcher Szenarien für Sie viel einfacher.

Objektbeispiel

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

kann geschrieben werden als:

let myTest = { test1, test3 } = myObject;

Array-Beispiel

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

kann geschrieben werden als:

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

Es ist absolut möglich. Nur nicht in einer Aussage.

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

(Beachten Sie die Klammern um die Aussage.) Beachten Sie jedoch, dass Lesbarkeit wichtiger ist als Code-Golf :).

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

Sie können die Umstrukturierung einfach so verwenden:

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

Oder führen Sie beide Objekte zusammen, wenn oof Werte hat:

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

Sie können das zerstörte Objekt in einer Pfeilfunktion zurückgeben und es mit Object.assign () einer Variablen zuweisen.

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

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

TROCKEN

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 }

oder

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

Sie können ein Objekt zerstören, das direkt einem anderen Objektattribut zugewiesen ist.

Arbeitsbeispiel:

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

Sie können mit der Zerstörung arbeiten, indem Sie Variablen mit demselben Namen des Objektattributs verwenden, das Sie abfangen möchten. Auf diese Weise müssen Sie Folgendes nicht tun:

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

Verwenden Sie diesen Weg:

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

Auf die gleiche Weise können Sie neue Werte für Objektstrukturen festlegen, wenn diese denselben Attributnamen haben.

Schauen Sie sich dieses Arbeitsbeispiel an:

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

Dies funktioniert in Chrom 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"
}

Ich habe mir diese Methode ausgedacht:

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

Was Sie so verwenden können:

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

Sie können also auswählen, welche Eigenschaften Sie ausgeben möchten, und sie in ein neues Objekt einfügen. Im Gegensatz _.pickdazu können Sie sie auch gleichzeitig umbenennen.

Wenn Sie die Requisiten auf ein vorhandenes Objekt kopieren möchten, setzen Sie einfach das destArgument.

Das ist eine Art Betrug, aber Sie können so etwas tun ...

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

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

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

In der Praxis würde man das allerdings selten nutzen wollen. Das Folgende ist VIEL klarer ... aber bei weitem nicht so lustig.

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

Eine andere völlig andere Route, die das Mucken mit dem Prototyp beinhaltet (jetzt vorsichtig ...):

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

Dies ist die am besten lesbare und kürzeste Lösung, die ich finden konnte:

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

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

console.log(newProps);

Es wird ausgegeben { isValidDate: 'yes' }

Es wäre schön, eines Tages so etwas sagen zu können, let newProps = ({ isValidDate } = props)aber leider wird es von ES6 nicht unterstützt.

Es ist kein schöner Weg, noch empfehle ich ihn, aber es ist auf diese Weise möglich, nur für Wissen.

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

Sie können JSON-Klassenmethoden verwenden, um dies wie folgt zu erreichen

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

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

Übergeben Sie Eigenschaften, die dem resultierenden Objekt als zweites Argument hinzugefügt werden müssen, um stringifyin einem Array-Format zu funktionieren.

MDN-Dokument für JSON.stringify