Wie kann ich die Eigenschaften von zwei JavaScript-Objekten dynamisch zusammenführen?

Question

Ich muss in der Lage sein, zwei (sehr einfache) JavaScript-Objekte zur Laufzeit zu verschmelzen. Zum Beispiel würde ich gerne:

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }

obj1.merge(obj2);

//obj1 now has three properties: food, car, and animal

Gibt es eine eingebaute Möglichkeit, dies zu tun? Ich brauche keine Rekursion, und ich muss nicht Funktionen zusammenführen, nur Methoden auf flache Objekte.

Answer 1

ECMAScript 2018 Standard-Methode

Sie würden verwenden Objektausbreitung :

let merged = {...obj1, ...obj2};

merged ist nun die Vereinigung von obj1 y obj2 . Eigenschaften in obj2 überschreiben die in obj1 .

/** There's no limit to the number of objects you can merge.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = {...obj1, ...obj2, ...obj3};

Hier ist auch die MDN-Dokumentation für diese Syntax. Wenn Sie babel verwenden, benötigen Sie die babel-plugin-transform-object-rest-spread Plugin, damit es funktioniert.

ECMAScript 2015 (ES6) Standardverfahren

/* For the case in question, you would do: */
Object.assign(obj1, obj2);

/** There's no limit to the number of objects you can merge.
 *  All objects get merged into the first object. 
 *  Only the object in the first argument is mutated and returned.
 *  Later properties overwrite earlier properties with the same name. */
const allRules = Object.assign({}, obj1, obj2, obj3, etc);

(siehe MDN JavaScript-Referenz )

---

Methode für ES5 und frühere Versionen

for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }

Beachten Sie, dass dies einfach alle Attribute von obj2 a obj1 was vielleicht nicht das ist, was Sie wollen, wenn Sie weiterhin die unveränderte obj1 .

Wenn Sie ein Framework verwenden, das Ihre Prototypen durcheinanderwirbelt, müssen Sie sich mit Prüfungen wie hasOwnProperty aber dieser Code wird in 99 % der Fälle funktionieren.

Beispielfunktion:

/**
 * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
 * @param obj1
 * @param obj2
 * @returns obj3 a new object based on obj1 and obj2
 */
function merge_options(obj1,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

Answer 2

JQuery hat auch ein Dienstprogramm für diese Aufgabe: http://api.jquery.com/jQuery.extend/ .

Entnommen aus der jQuery-Dokumentation:

// Merge options object into settings object
var settings = { validate: false, limit: 5, name: "foo" };
var options  = { validate: true, name: "bar" };
jQuery.extend(settings, options);

// Now the content of settings object is the following:
// { validate: true, limit: 5, name: "bar" }

Der obige Code mutiert die bestehendes Objekt namens settings .

---

Wenn Sie eine neues Objekt ohne eines der beiden Argumente zu ändern, verwenden Sie dies:

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };

/* Merge defaults and options, without modifying defaults */
var settings = $.extend({}, defaults, options);

// The content of settings variable is now the following:
// {validate: true, limit: 5, name: "bar"}
// The 'defaults' and 'options' variables remained the same.

Answer 3

El Harmonie ECMAScript 2015 (ES6) gibt an. Object.assign die dies tun wird.

Object.assign(obj1, obj2);

Die aktuelle Browserunterstützung ist besser werden aber wenn Sie für Browser entwickeln, die keine Unterstützung haben, können Sie eine Polyfill .

Answer 4

Ich habe nach Code zum Zusammenführen von Objekteigenschaften gegoogelt und bin hier gelandet. Da es jedoch keinen Code für rekursive Zusammenführung gab, habe ich ihn selbst geschrieben. (Vielleicht jQuery erweitern ist rekursiv BTW?) Wie auch immer, hoffentlich jemand anderes wird es auch nützlich finden.

(Jetzt verwendet der Code nicht mehr Object.prototype :)

Código

/*
* Recursively merge properties of two objects 
*/
function MergeRecursive(obj1, obj2) {

  for (var p in obj2) {
    try {
      // Property in destination object set; update its value.
      if ( obj2[p].constructor==Object ) {
        obj1[p] = MergeRecursive(obj1[p], obj2[p]);

      } else {
        obj1[p] = obj2[p];

      }

    } catch(e) {
      // Property in destination object not set; create it and set its value.
      obj1[p] = obj2[p];

    }
  }

  return obj1;
}

Ein Beispiel

o1 = {  a : 1,
        b : 2,
        c : {
          ca : 1,
          cb : 2,
          cc : {
            cca : 100,
            ccb : 200 } } };

o2 = {  a : 10,
        c : {
          ca : 10,
          cb : 20, 
          cc : {
            cca : 101,
            ccb : 202 } } };

o3 = MergeRecursive(o1, o2);

Erzeugt das Objekt o3 wie

o3 = {  a : 10,
        b : 2,
        c : {
          ca : 10,
          cb : 20,
          cc : { 
            cca : 101,
            ccb : 202 } } };

Answer 5

Beachten Sie, dass underscore.js 's extend -Verfahren tut dies in einem Einzeiler:

_.extend({name : 'moe'}, {age : 50});
=> {name : 'moe', age : 50}