Angenommen, ich habe eine optionsVariable und möchte einen Standardwert festlegen.

Was ist der Vor- / Nachteil dieser beiden Alternativen?

Verwenden der Objektverteilung

options = {...optionsDefault, ...options};

Oder mit Object.assign

options = Object.assign({}, optionsDefault, options);

Dies ist das Commit , das mich wundern ließ.

Dies ist nicht unbedingt erschöpfend.

Syntax verbreiten

options = {...optionsDefault, ...options};

Vorteile:

• Wenn Sie Code für die Ausführung in Umgebungen ohne native Unterstützung erstellen, können Sie diese Syntax möglicherweise nur kompilieren (im Gegensatz zur Verwendung einer Polyfüllung). (Zum Beispiel mit Babel.)

• Weniger ausführlich.

Nachteile:

• Als diese Antwort ursprünglich geschrieben wurde, war dies ein Vorschlag , der nicht standardisiert war. Überlegen Sie bei der Verwendung von Vorschlägen, was Sie tun würden, wenn Sie jetzt Code damit schreiben und dieser auf dem Weg zur Standardisierung nicht standardisiert oder geändert wird. Dies wurde inzwischen in ES2018 standardisiert.

• Wörtlich, nicht dynamisch.

Object.assign()

options = Object.assign({}, optionsDefault, options);

Vorteile:

• Standardisiert.

• Dynamisch. Beispiel:

  var sources = [{a: "A"}, {b: "B"}, {c: "C"}];
  options = Object.assign.apply(Object, [{}].concat(sources));
  // or
  options = Object.assign({}, ...sources);

Nachteile:

• Ausführlicher.
• Wenn Sie Code für die Ausführung in Umgebungen ohne native Unterstützung erstellen, müssen Sie eine Polyfüllung durchführen.

Dies ist das Commit, das mich wundern ließ.

Das hängt nicht direkt mit dem zusammen, was Sie fragen. Dieser Code wurde nicht verwendet Object.assign(), sondern Benutzercode ( object-assign), der dasselbe tut. Sie scheinen diesen Code mit Babel zu kompilieren (und ihn mit Webpack zu bündeln), worüber ich gesprochen habe: die Syntax, die Sie einfach kompilieren können. Sie zogen es anscheinend vor, dies object-assignals Abhängigkeit einbeziehen zu müssen, die in ihren Build einfließen würde.

Als Referenzobjekt wird Rest / Spread in ECMAScript 2018 als Stufe 4 finalisiert. Den Vorschlag finden Sie hier .

Das Zurücksetzen und Verteilen von Objekten funktioniert größtenteils auf die gleiche Weise. Der Hauptunterschied besteht darin, dass Spread Eigenschaften definiert, während Object.assign () sie festlegt . Dies bedeutet, dass Object.assign () Setter auslöst.

Es ist zu beachten, dass Objektrest / Spread 1: 1 anders als Object.assign () zugeordnet ist und sich anders verhält als Array (iterable) Spread. Wenn Sie beispielsweise ein Array verteilen, werden Nullwerte verteilt. Bei Verwendung von Objektstreuung werden Nullwerte jedoch stillschweigend auf nichts verteilt.

Array (Iterable) Spread-Beispiel

const x = [1, 2, null , 3];
const y = [...x, 4, 5];
const z = null;

console.log(y); // [1, 2, null, 3, 4, 5];
console.log([...z]); // TypeError

Beispiel für die Objektverteilung

const x = null;
const y = {a: 1, b: 2};
const z = {...x, ...y};

console.log(z); //{a: 1, b: 2}

Dies steht im Einklang mit der Funktionsweise von Object.assign (). Beide schließen den Nullwert ohne Fehler aus.

const x = null;
const y = {a: 1, b: 2};
const z = Object.assign({}, x, y);

console.log(z); //{a: 1, b: 2}

Ich denke, ein großer Unterschied zwischen dem Spread-Operator und dem Object.assign, der in den aktuellen Antworten nicht erwähnt zu werden scheint, besteht darin, dass der Spread-Operator den Prototyp des Quellobjekts nicht auf das Zielobjekt kopiert. Wenn Sie einem Objekt Eigenschaften hinzufügen möchten und nicht ändern möchten, um welche Instanz es sich handelt, müssen Sie diese verwenden Object.assign. Das folgende Beispiel sollte dies demonstrieren:

const error = new Error();
error instanceof Error // true

const errorExtendedUsingSpread = {
  ...error,
  ...{
    someValue: true
  }
};
errorExtendedUsingSpread instanceof Error; // false

const errorExtendedUsingAssign = Object.assign(error, {
  someValue: true
});
errorExtendedUsingAssign instanceof Error; // true

Wie andere bereits erwähnt haben, Object.assign()erfordert in diesem Moment des Schreibens eine Polyfüllung, und die Objektverbreitung ...erfordert ein gewisses Transpiling (und möglicherweise auch eine Polyfüllung), um zu arbeiten.

Betrachten Sie diesen Code:

// Babel wont touch this really, it will simply fail if Object.assign() is not supported in browser.
const objAss = { message: 'Hello you!' };
const newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

// Babel will transpile with use to a helper function that first attempts to use Object.assign() and then falls back.
const objSpread = { message: 'Hello you!' };
const newObjSpread = {...objSpread, dev: true };
console.log(newObjSpread);

Diese beiden erzeugen die gleiche Ausgabe.

Hier ist die Ausgabe von Babel an ES5:

var objAss = { message: 'Hello you!' };
var newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var objSpread = { message: 'Hello you!' };
var newObjSpread = _extends({}, objSpread, { dev: true });
console.log(newObjSpread);

Das ist mein bisheriges Verständnis. Object.assign()ist eigentlich standardisiert, da als objektverbreitung ...noch nicht erfolgt. Das einzige Problem ist die Browserunterstützung für die ersteren und in Zukunft auch für die letzteren.

Spielen Sie hier mit dem Code

Hoffe das hilft.

Der Objektverbreitungsoperator (...) funktioniert in Browsern nicht, da er noch nicht Teil einer ES-Spezifikation ist, sondern nur ein Vorschlag. Die einzige Möglichkeit besteht darin, es mit Babel (oder ähnlichem) zu kompilieren.

Wie Sie sehen können, handelt es sich nur um syntaktischen Zucker über Object.assign ({}).

Soweit ich sehen kann, sind dies die wichtigen Unterschiede.

• Object.assign funktioniert in den meisten Browsern (ohne zu kompilieren)
• ... für Objekte ist nicht standardisiert
• ... schützt Sie vor versehentlichem Mutieren des Objekts
• ... wird Object.assign in Browsern ohne es polyfill
• ... benötigt weniger Code, um dieselbe Idee auszudrücken

Ich möchte den Status der ES-Funktion "Spread Object Merge" in Browsern und im Ökosystem über Tools zusammenfassen.

Spec

• https://github.com/tc39/proposal-object-rest-spread
• Diese Sprachfunktion ist ein Vorschlag der Stufe 4 , dh sie wurde in die ES-Sprachspezifikation integriert, aber noch nicht umfassend implementiert.

Browser: bald in Chrome, in SF, Firefox (Version 60, IIUC)

• Browserunterstützung für in Chrome 60 gelieferte "Spread Properties" , einschließlich dieses Szenarios.
• Die Unterstützung für dieses Szenario funktioniert NICHT in aktuellem Firefox (59), funktioniert jedoch in meiner Firefox Developer Edition. Ich glaube also, dass es in Firefox 60 ausgeliefert wird.
• Safari: nicht getestet, aber Kangax sagt, dass es in Desktop Safari 11.1 funktioniert, aber nicht in SF 11
• iOS Safari: nicht getestet, aber Kangax sagt, dass es in iOS 11.3 funktioniert, aber nicht in iOS 11
• noch nicht in Edge

Werkzeuge: Knoten 8.7, TS 2.1

• NodeJS unterstützt seit 8.7 (via Kangax). Bestätigt am 9.8, als ich lokal getestet habe.
• TypeScript hat es seit 2.1 unterstützt , aktuell ist 2.8

Links

• Kangax "Property Spread"
• https://davidwalsh.name/merge-objects

Codebeispiel (dient gleichzeitig als Kompatibilitätstest)

var x = { a: 1, b: 2 };
var y = { c: 3, d: 4, a: 5 };
var z = {...x, ...y};
console.log(z); // { a: 5, b: 2, c: 3, d: 4 }

Nochmals: Zum Zeitpunkt des Schreibens funktioniert dieses Beispiel ohne Transpilation in Chrome (60+), Firefox Developer Edition (Vorschau von Firefox 60) und Node (8.7+).

Warum antworten?

Ich schreibe dies 2,5 Jahre nach der ursprünglichen Frage. Aber ich hatte genau die gleiche Frage, und hier hat Google mich hingeschickt. Ich bin ein Sklave von SOs Mission, den langen Schwanz zu verbessern.

Da dies eine Erweiterung der "Array Spread" -Syntax ist, war es für mich sehr schwierig zu googeln und in Kompatibilitätstabellen schwer zu finden. Das nächste, das ich finden konnte, ist Kangax "Property Spread" , aber dieser Test enthält nicht zwei Spreads im selben Ausdruck (keine Zusammenführung). Auch der Name auf den Statusseiten für Vorschläge / Entwürfe / Browser verwendet alle "Eigenschaftsverteilung", aber es scheint mir, dass dies ein "erster Grundsatz" war, zu dem die Community nach den Vorschlägen zur Verwendung der Verbreitungssyntax für "Objektzusammenführung" gelangt ist. (Dies könnte erklären, warum es so schwierig ist, zu googeln.) Daher dokumentiere ich meine Ergebnisse hier, damit andere Links zu dieser bestimmten Funktion anzeigen, aktualisieren und kompilieren können. Ich hoffe es fängt an. Bitte helfen Sie dabei, die Nachricht von der Landung in der Spezifikation und in den Browsern zu verbreiten.

Zuletzt hätte ich diese Informationen als Kommentar hinzugefügt, aber ich konnte sie nicht bearbeiten, ohne die ursprüngliche Absicht der Autoren zu brechen. Insbesondere kann ich den Kommentar von @ ChillyPenguin nicht bearbeiten, ohne dass er seine Absicht verliert, @RichardSchulte zu korrigieren. Aber Jahre später stellte sich Richard als richtig heraus (meiner Meinung nach). Also schreibe ich stattdessen diese Antwort in der Hoffnung, dass sie irgendwann bei den alten Antworten an Bedeutung gewinnt (könnte Jahre dauern, aber genau darum geht es schließlich beim Long-Tail- Effekt).

HINWEIS: Spread ist NICHT nur syntaktischer Zucker um Object.assign. Sie arbeiten hinter den Kulissen sehr unterschiedlich.

Object.assign wendet Setter auf ein neues Objekt an, Spread nicht. Außerdem muss das Objekt iterierbar sein.

Kopieren Verwenden Sie diese Option, wenn Sie den Wert des Objekts in diesem Moment benötigen und nicht möchten, dass dieser Wert Änderungen widerspiegelt, die von anderen Eigentümern des Objekts vorgenommen wurden.

Verwenden Sie diese Option, um eine flache Kopie des Objekts zu erstellen. Es wird empfohlen, unveränderliche Eigenschaften immer zu kopieren. Da veränderbare Versionen an unveränderliche Eigenschaften übergeben werden können, stellt copy sicher, dass Sie immer mit einem unveränderlichen Objekt arbeiten

Assign Assign ist etwas anderes als das Kopieren. Assign generiert einen Setter, der den Wert direkt der Instanzvariablen zuweist, anstatt ihn zu kopieren oder beizubehalten. Wenn der Getter einer Zuweisungseigenschaft aufgerufen wird, wird ein Verweis auf die tatsächlichen Daten zurückgegeben.

Andere Antworten sind alt, konnten keine gute Antwort bekommen.
Das folgende Beispiel bezieht sich auf Objektliterale und hilft, wie sich beide ergänzen können und wie sie sich nicht ergänzen können (daher Unterschied):

var obj1 = { a: 1,  b: { b1: 1, b2: 'b2value', b3: 'b3value' } };

// overwrite parts of b key
var obj2 = {
      b: {
        ...obj1.b,
        b1: 2
      }
};
var res2 = Object.assign({}, obj1, obj2); // b2,b3 keys still exist
document.write('res2: ', JSON.stringify (res2), '<br>');
// Output:
// res2: {"a":1,"b":{"b1":2,"b2":"b2value","b3":"b3value"}}  // NOTE: b2,b3 still exists

// overwrite whole of b key
var obj3 = {
      b: {
        b1: 2
      }
};
var res3 = Object.assign({}, obj1, obj3); // b2,b3 keys are lost
document.write('res3: ', JSON.stringify (res3), '<br>');
// Output:
  // res3: {"a":1,"b":{"b1":2}}  // NOTE: b2,b3 values are lost

Einige weitere kleine Beispiele hier, auch für Array & Objekt:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Dies ist jetzt Teil von ES6, daher standardisiert und auch auf MDN dokumentiert: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Es ist sehr bequem zu bedienen und macht neben der Objektzerstörung viel Sinn.

Der einzige verbleibende Vorteil, der oben aufgeführt ist, sind die dynamischen Funktionen von Object.assign (). Dies ist jedoch so einfach wie das Verteilen des Arrays innerhalb eines Literalobjekts. In der kompilierten Babel-Ausgabe wird genau das verwendet, was mit Object.assign () demonstriert wird.

Die richtige Antwort wäre also, die Objektverteilung zu verwenden, da sie jetzt standardisiert und weit verbreitet ist (siehe Reagieren, Reduzieren usw.), einfach zu verwenden ist und alle Funktionen von Object.assign () bietet.

Ich möchte dieses einfache Beispiel hinzufügen, wenn Sie Object.assign verwenden müssen.

class SomeClass {
  constructor() {
    this.someValue = 'some value';
  }

  someMethod() {
    console.log('some action');
  }
}


const objectAssign = Object.assign(new SomeClass(), {});
objectAssign.someValue; // ok
objectAssign.someMethod(); // ok

const spread = {...new SomeClass()};
spread.someValue; // ok
spread.someMethod(); // there is no methods of SomeClass!

Es kann nicht klar sein, wenn Sie JavaScript verwenden. Mit TypeScript ist es jedoch einfacher, eine Instanz einer Klasse zu erstellen

const spread: SomeClass = {...new SomeClass()} // Error