Wie dupliziere ich Objekteigenschaften in einem anderen Objekt?

Angesichts des Objekts:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

Wie kann ich die Eigenschaften in ein anderes Objekt ( secondObject) wie folgt kopieren :

var secondObject = {
    key1 : 'value1',
    key2 : 'value2',
    key3 : 'value3',
    key4 : 'value4'
};

mit einem Verweis auf die firstObject? Etwas wie das:

var secondObject = {
    firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

(Das funktioniert nicht ... Ich habe es nur in großen Zeilen dargestellt, um zu zeigen, wie ich den Code strukturieren möchte.)

Ist eine Lösung ohne Verwendung von JavaScript-Frameworks möglich?

for(var k in firstObject) secondObject[k]=firstObject[k];

Ausgehend von der Antwort von @ Bardzuśny hat ES6 eine native Lösung geliefert: die Object.assign()Funktion!

Die Verwendung ist einfach:

Object.assign(secondObject, firstObject);

Das ist es!

Die Unterstützung ist derzeit offensichtlich schlecht. Nur Firefox (34+) unterstützt es sofort, während Chrome (45+) und Opera (32+) das Setzen des 'experimentellen Flags' erfordern.

Die Unterstützung wird verbessert, wobei die neuesten Versionen von Chrome, Firefox, Opera, Safari und Edge dies unterstützen (IE hat insbesondere keine Unterstützung). Transpiler wie Babel und Traceur sind ebenfalls verfügbar. Sehen Sie hier für weitere Details.

Per ES6 - Spread-Syntax :

Sie können einfach verwenden:

const thirdObject = {
   ...firstObject,
   ...secondObject   
}

Dies vermeidet Probleme beim Übergeben dieser Objekte als Referenz.

Zusätzlich werden Objekte mit tiefer Verschachtelung behandelt.

Durchlaufen Sie die Eigenschaften des ersten Objekts und weisen Sie sie dem zweiten Objekt wie folgt zu:

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

for (var prop in firstObject) {
    if (firstObject.hasOwnProperty(prop)) {
        secondObject[prop] = firstObject[prop];
    }
}

Die for- inSchleife ist nicht genug; du brauchst hasOwnProperty. Unter http://bonsaiden.github.com/JavaScript-Garden/#object.forinloop finden Sie eine ausführliche Erklärung, warum.

Hier den Nekromanten spielen, weil ES5 uns gebracht hat Object.keys(), mit dem Potenzial, uns vor all diesen .hasOwnProperty()Prüfungen zu retten .

Object.keys(firstObject).forEach(function(key) {
  secondObject[key] = firstObject[key];
});

Oder wickeln Sie es in eine Funktion ein (begrenzte "Kopie" von lodash _.assign()):

function assign(object, source) {
  Object.keys(source).forEach(function(key) {
    object[key] = source[key];
  });
}

assign(secondObject, firstObject); // assign firstObject properties to secondObject

Object.keys()ist eine relativ neue Methode, vor allem: nicht verfügbar in IE <9. Das gleiche gilt für die .forEach()Array-Methode, die ich anstelle der regulären forSchleife verwendet habe.

Glücklicherweise gibt es für diese alten Browser es5-shim , das viele ES5-Funktionen (einschließlich dieser beiden) mehrfach ausfüllt.

(Ich bin alles für Polyfills, anstatt mich von der Verwendung cooler, neuer Sprachfunktionen zurückzuhalten.)

Necro'ing, damit Benutzer mit hasOwnProperty und der tatsächlichen Objektprüfung eine Deep-Copy-Methode finden können:

var extend = function (original, context, key) {
  for (key in context)
    if (context.hasOwnProperty(key))
      if (Object.prototype.toString.call(context[key]) === '[object Object]')
        original[key] = extend(original[key] || {}, context[key]);
      else
        original[key] = context[key];
  return original;
};

Man kann Object.assign verwenden , um Objekte zu kombinieren. Die gemeinsame Eigenschaft wird von rechts nach links kombiniert und überschrieben, dh dieselbe Eigenschaft links wird von rechts überschrieben.

Und es ist wichtig , im ersten ein leeres Objekt anzugeben, um eine Mutation der Quellobjekte zu vermeiden. Die Quellobjekte sollten sauber bleiben, da sie Object.assign()selbst ein neues Objekt zurückgeben.

Hoffe das hilft!

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    key3 : 'value3',
    key4 : 'value4'
};

var finalObject = Object.assign({}, firstObject, secondObject)

console.log(finalObject)

Verbesserung der kingPuppy- Idee und der OP-Idee (flache Kopie) - Ich füge nur 3 Punkte zum OP "Beispiel" hinzu :)

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

var firstObject = {
    key1 : 'value1',
    key2 : 'value2'
};

var secondObject = {
    ...firstObject,
    key3 : 'value3',
    key4 : 'value4'
};

console.log(secondObject);

Dies sollte funktionieren, hier getestet .

var secondObject = {
    firstObject: JSON.parse(JSON.stringify(firstObject)),
    key3 : 'value3',
    key4 : 'value4'
};

Hinweis : Dadurch werden die Methoden von firstObject
Hinweis 2 nicht kopiert. Für die Verwendung in älteren Browsern benötigen Sie einen JSON-Parser.
Hinweis 3 : Die Zuweisung per Referenz ist eine praktikable Option, insbesondere wenn sie firstObjectMethoden enthält. Das angegebene jsfiddle-Beispiel wurde entsprechend angepasst

Leider können Sie in einem solchen Objekt keinen Verweis auf eine Variable einfügen. Sie können jedoch eine Funktion erstellen, die die Werte des Objekts in ein anderes Objekt kopiert.

function extend( obj1, obj2 ) {
    for ( var i in obj2 ) {
        obj1[i] = obj2[i];
    }
    return obj1;
}

var firstObject = {
    key1: "value1",
    key2: "value2"
};

var secondObject = extend({
    key3: "value3",
    key4: "value4"
}, firstObject );

Wenn Sie nur die Eigenschaften abrufen möchten, die im zweiten Objekt vorhanden sind, können Sie Object.keysdie Eigenschaften des ersten Objekts abrufen. Sie haben zwei Methoden:

A.) map um die Eigenschaften des ersten Objekts dem zweiten Objekt unter Verwendung von Nebenwirkungen zuzuweisen:

var a = {a:100, b:9000, c:300};
var b = {b:-1};

Object.keys(a).map(function(key, index) {
    if (typeof b[key] !== 'undefined') {
        console.log(key);
        b[key] = a[key];    
    }
});

B.) oder reduceum ein neues Objekt zu erstellen und es dem zweiten Objekt zuzuweisen. Bitte beachten Sie, dass diese Methode ersetzt andere Eigenschaften das zweite Objekt davor haben könnte , die nicht das erste Objekt brachte:

var a = {a:100, b:9000, c:300};
var b = {b:-1, d:-1}; // d will be gone

b = Object.keys(a).reduce(function(result, current) {
    if (typeof b[current] !== 'undefined') {
        result[current] = a[current];   
    }
    return result;
}, {});

Verwenden Sie die Eigenschaftsverbreitungsnotation. Es wurde in ES2018 hinzugefügt (Spread für Arrays / Iterables war früher, ES2015). {... firstObject} verteilt alle aufzählbaren Eigenschaften als diskrete Eigenschaften.

let secondObject = {
      ...firstObject,
      key3 : 'value3',
      key4 : 'value4'
    }

Ich würde lieber firstObject als Prototyp von secondObject verwenden und einen Eigenschaftsdeskriptor hinzufügen:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3", writable: true, configurable: true, enumerable: true},
      key4: {value: "value4", writable: true, configurable: true, enumerable: true}
      });

Es ist sicherlich kein Einzeiler, aber es gibt Ihnen mehr Kontrolle. Wenn Sie an Eigenschaftsbeschreibungen interessiert sind, empfehle ich, diesen Artikel zu lesen: http://patrickdelancy.com/2012/09/property-descriptors-in-javascript/#comment-2062 und MDN-Seite https: //developer.mozilla. org / de-US / docs / Web / JavaScript / Reference / Global_Objects / Object / create

Sie können auch einfach Werte zuweisen und die Deskriptoren weglassen und etwas kürzer machen:

var secondObject = Object.create(firstObject, {
      key3: {value: "value3"}
      key4: {value: "value4"}
  });

Kompatibilität: ECMAScript 5, also IE9 +

var firstObject = {
     key1: "value1",
     key2: "value2"
};

var secondObject = {
     key3: "value3",
     key4: "value4"
     copy: function(firstObject){
           this.key1 = firstObject.key1;
           this.key2 = firstObject.key2;
     }
 };

Mit der folgenden Methode werden die Eigenschaften kopiert

secondObject.copy(firstObject)

Ich bin sehr neu in Javascript, fand aber, dass dies funktioniert. Ein bisschen zu lang, denke ich, aber es funktioniert.