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
javascript
ecmascript-6
destructuring
majorBummer
quelle
quelle
Object.assign(oof, foo)
Object.assign
Antworten:
Während hässlich und ein bisschen repetitiv, können Sie tun
Dadurch werden die beiden Werte des
foo
Objekts gelesen und an ihre jeweiligen Positionen auf demoof
Objekt geschrieben.Persönlich würde ich immer noch lieber lesen
oder
obwohl.
quelle
var oof = {};
.({x: oof.x, y: oof.y} = foo)
? Ich denke, Sie haben ein zusätzliches f in oof gesetzt .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.assign
jedoch verwenden - wenn Sie nicht alle eigenen Eigenschaften benötigen, können Sie dies dennoch tunquelle
--harmony_destructuring
aktiviert. Ich sehe "SyntaxError: Unerwartetes Token".{oof.x, oof.y} = foo
. Oder vielleicht hatte ich es wirklich vermisst.IMO ist dies der einfachste Weg, um das zu erreichen, wonach Sie suchen:
Grundsätzlich in Strukturen zerlegen und dann die Initialisierungskürzel verwenden, um ein neues Objekt zu erstellen. Kein Bedarf für
Object.assign
Ich denke, das ist sowieso der am besten lesbare Weg. Hiermit können Sie genau die Requisiten auswählen, die
someObject
Sie möchten. Wenn Sie ein vorhandenes Objekt haben, in das Sie nur die Requisiten zusammenführen möchten, gehen Sie wie folgt vor:Eine andere, wohl sauberere Art, es zu schreiben, ist:
Ich benutze dies häufig für
POST
Anfragen, 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...
Außerdem können Sie beim Erstellen eines neuen Objekts den Spread-Operator anstelle von Object.assign verwenden:
Oder...
quelle
Abgesehen von
Object.assign
der Objektverbreitungssyntax handelt es sich um einen Stage 2-Vorschlag für ECMAScript.Um diese Funktion nutzen zu können, müssen Sie jedoch babel verwenden
stage-2
oder eintransform-object-rest-spread
Plugin verwenden. Hier ist eine Demo zu Babel mitstage-2
quelle
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
kann geschrieben werden als:
Array-Beispiel
kann geschrieben werden als:
quelle
Es ist absolut möglich. Nur nicht in einer Aussage.
(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
quelle
Sie können die Umstrukturierung einfach so verwenden:
Oder führen Sie beide Objekte zusammen, wenn oof Werte hat:
quelle
oof = {...oof, ...foo}
Sie können das zerstörte Objekt in einer Pfeilfunktion zurückgeben und es mit Object.assign () einer Variablen zuweisen.
quelle
TROCKEN
oder
quelle
Sie können ein Objekt zerstören, das direkt einem anderen Objektattribut zugewiesen ist.
Arbeitsbeispiel:
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:
Verwenden Sie diesen Weg:
Auf die gleiche Weise können Sie neue Werte für Objektstrukturen festlegen, wenn diese denselben Attributnamen haben.
Schauen Sie sich dieses Arbeitsbeispiel an:
quelle
Dies funktioniert in Chrom 53.0.2785.89
quelle
oof
nur eine Referenz erhaltenfoo
und die gesamte Destrukturierung umgehen (zumindest in Chrome).oof === foo
undlet oof = { x } = foo
kehrt doch zurück{ x, y }
Ich habe mir diese Methode ausgedacht:
Was Sie so verwenden können:
Sie können also auswählen, welche Eigenschaften Sie ausgeben möchten, und sie in ein neues Objekt einfügen. Im Gegensatz
_.pick
dazu können Sie sie auch gleichzeitig umbenennen.Wenn Sie die Requisiten auf ein vorhandenes Objekt kopieren möchten, setzen Sie einfach das
dest
Argument.quelle
Das ist eine Art Betrug, aber Sie können so etwas tun ...
In der Praxis würde man das allerdings selten nutzen wollen. Das Folgende ist VIEL klarer ... aber bei weitem nicht so lustig.
Eine andere völlig andere Route, die das Mucken mit dem Prototyp beinhaltet (jetzt vorsichtig ...):
quelle
Dies ist die am besten lesbare und kürzeste Lösung, die ich finden konnte:
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.quelle
Es ist kein schöner Weg, noch empfehle ich ihn, aber es ist auf diese Weise möglich, nur für Wissen.
quelle
Sie können JSON-Klassenmethoden verwenden, um dies wie folgt zu erreichen
Übergeben Sie Eigenschaften, die dem resultierenden Objekt als zweites Argument hinzugefügt werden müssen, um
stringify
in einem Array-Format zu funktionieren.MDN-Dokument für JSON.stringify
quelle