Ich muss in der Lage sein, zwei (sehr einfache) JavaScript-Objekte zur Laufzeit zusammenzuführen. Zum Beispiel möchte ich:

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

obj1.merge(obj2);

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

Hat jemand ein Skript dafür oder kennt eine eingebaute Methode, um dies zu tun? Ich brauche keine Rekursion und ich muss keine Funktionen zusammenführen, sondern nur Methoden für flache Objekte.

ECMAScript 2018 Standardmethode

Sie würden Objektverbreitung verwenden :

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

mergedist jetzt die Vereinigung von obj1und 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 finden Sie auch die MDN-Dokumentation für diese Syntax. Wenn Sie Babel verwenden, benötigen Sie das Babel-Plugin-Transform-Object-Rest-Spread- Plugin, damit es funktioniert.

ECMAScript 2015 (ES6) Standardmethode

/* 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üher

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

Beachten Sie, dass dadurch einfach alle Attribute hinzugefügt werden obj2, obj1die möglicherweise nicht Ihren Wünschen entsprechen, wenn Sie die unveränderten weiterhin verwenden möchten obj1.

Wenn Sie ein Framework verwenden, das Ihre Prototypen überfrachtet, müssen Sie mit Überprüfungen wie z. B. besser umgehen hasOwnProperty, aber dieser Code funktioniert in 99% der Fälle.

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

jQuery hat auch ein Dienstprogramm dafür: 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 das vorhandene Objekt mit dem Namen settings.

Wenn Sie ein neues Objekt erstellen möchten, ohne eines der Argumente zu ändern, verwenden Sie Folgendes:

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.

Das Harmony ECMAScript 2015 (ES6) legt fest Object.assign, wer dies tun wird.

Object.assign(obj1, obj2);

Die aktuelle Browserunterstützung wird immer besser . Wenn Sie jedoch für Browser entwickeln, die keine Unterstützung bieten, können Sie eine Polyfüllung verwenden .

Ich habe nach Code gegoogelt, um Objekteigenschaften zusammenzuführen, und bin hier gelandet. Da es jedoch keinen Code für die rekursive Zusammenführung gab, habe ich ihn selbst geschrieben. (Vielleicht ist jQuery Extend übrigens rekursiv?) Wie auch immer, hoffentlich findet es auch jemand anderes nützlich.

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

Code

/*
* 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 Objekt o3 wie

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

Beachten Sie, dass underscore.jsdie extendMethode dies in einem Einzeiler tut:

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

Ähnlich wie bei jQuery extens () haben Sie in AngularJS dieselbe Funktion :

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

Ich muss heute Objekte zusammenführen, und diese Frage (und Antworten) hat mir sehr geholfen. Ich habe einige der Antworten ausprobiert, aber keine davon entsprach meinen Anforderungen. Deshalb habe ich einige der Antworten kombiniert, selbst etwas hinzugefügt und eine neue Zusammenführungsfunktion entwickelt. Hier ist es:

var merge = function() {
    var obj = {},
        i = 0,
        il = arguments.length,
        key;
    for (; i < il; i++) {
        for (key in arguments[i]) {
            if (arguments[i].hasOwnProperty(key)) {
                obj[key] = arguments[i][key];
            }
        }
    }
    return obj;
};

Einige Anwendungsbeispiele:

var t1 = {
    key1: 1,
    key2: "test",
    key3: [5, 2, 76, 21]
};
var t2 = {
    key1: {
        ik1: "hello",
        ik2: "world",
        ik3: 3
    }
};
var t3 = {
    key2: 3,
    key3: {
        t1: 1,
        t2: 2,
        t3: {
            a1: 1,
            a2: 3,
            a4: [21, 3, 42, "asd"]
        }
    }
};

console.log(merge(t1, t2));
console.log(merge(t1, t3));
console.log(merge(t2, t3));
console.log(merge(t1, t2, t3));
console.log(merge({}, t1, { key1: 1 }));

Sie können Objektverbreitungseigenschaften verwenden - derzeit ein ECMAScript-Vorschlag der Stufe 3.

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

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);

Die angegebenen Lösungen sollten geändert werden, um source.hasOwnProperty(property)die for..inSchleifen vor dem Zuweisen einzuchecken. Andernfalls kopieren Sie am Ende die Eigenschaften der gesamten Prototypenkette, was selten erwünscht ist ...

Führen Sie die Eigenschaften von N Objekten in einer Codezeile zusammen

Eine Object.assignMethode ist Teil des ECMAScript 2015 (ES6) -Standards und macht genau das, was Sie brauchen. ( IEnicht unterstützt)

var clone = Object.assign({}, obj);

Die Object.assign () -Methode wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren.

Weiterlesen...

Die Polyfüllung zur Unterstützung älterer Browser:

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(nextSource);
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

Die folgenden beiden sind wahrscheinlich ein guter Ausgangspunkt. lodash hat auch eine Anpassungsfunktion für diese besonderen Bedürfnisse!

_.extend( http://underscorejs.org/#extend )
_.merge( https://lodash.com/docs#merge )

Übrigens, was Sie alle tun, ist, Eigenschaften zu überschreiben, nicht zu verschmelzen ...

So wird der JavaScript-Objektbereich wirklich zusammengeführt: Nur Schlüssel im toObjekt, die selbst keine Objekte sind, werden von überschrieben from. Alles andere wird wirklich zusammengeführt . Natürlich können Sie dieses Verhalten ändern, um nichts zu überschreiben, was nur existiert, wenn to[n] is undefined, etc ...:

var realMerge = function (to, from) {

    for (n in from) {

        if (typeof to[n] != 'object') {
            to[n] = from[n];
        } else if (typeof from[n] == 'object') {
            to[n] = realMerge(to[n], from[n]);
        }
    }
    return to;
};

Verwendungszweck:

var merged = realMerge(obj1, obj2);

Hier ist mein Stich was

1. Unterstützt Deep Merge
2. Mutiert keine Argumente
3. Nimmt eine beliebige Anzahl von Argumenten an
4. Erweitert den Objektprototyp nicht
5. Hängt nicht von einer anderen Bibliothek ab ( jQuery , MooTools , Underscore.js usw.)
6. Beinhaltet die Überprüfung auf hasOwnProperty

7. Ist kurz :)

   /*
       Recursively merge properties and return new object
       obj1 <- obj2 [ <- ... ]
   */
   function merge () {
       var dst = {}
           ,src
           ,p
           ,args = [].splice.call(arguments, 0)
       ;
   
       while (args.length > 0) {
           src = args.splice(0, 1)[0];
           if (toString.call(src) == '[object Object]') {
               for (p in src) {
                   if (src.hasOwnProperty(p)) {
                       if (toString.call(src[p]) == '[object Object]') {
                           dst[p] = merge(dst[p] || {}, src[p]);
                       } else {
                           dst[p] = src[p];
                       }
                   }
               }
           }
       }
   
      return dst;
   }

Beispiel:

a = {
    "p1": "p1a",
    "p2": [
        "a",
        "b",
        "c"
    ],
    "p3": true,
    "p5": null,
    "p6": {
        "p61": "p61a",
        "p62": "p62a",
        "p63": [
            "aa",
            "bb",
            "cc"
        ],
        "p64": {
            "p641": "p641a"
        }
    }
};

b = {
    "p1": "p1b",
    "p2": [
        "d",
        "e",
        "f"
    ],
    "p3": false,
    "p4": true,
    "p6": {
        "p61": "p61b",
        "p64": {
            "p642": "p642b"
        }
    }
};

c = {
    "p1": "p1c",
    "p3": null,
    "p6": {
        "p62": "p62c",
        "p64": {
            "p643": "p641c"
        }
    }
};

d = merge(a, b, c);


/*
    d = {
        "p1": "p1c",
        "p2": [
            "d",
            "e",
            "f"
        ],
        "p3": null,
        "p5": null,
        "p6": {
            "p61": "p61b",
            "p62": "p62c",
            "p63": [
                "aa",
                "bb",
                "cc"
            ],
            "p64": {
                "p641": "p641a",
                "p642": "p642b",
                "p643": "p641c"
            }
        },
        "p4": true
    };
*/

Object.assign ()

ECMAScript 2015 (ES6)

Dies ist eine neue Technologie, die Teil des ECMAScript 2015 (ES6) -Standards ist. Die Spezifikation dieser Technologie wurde fertiggestellt. Überprüfen Sie jedoch die Kompatibilitätstabelle auf Verwendung und Implementierungsstatus in verschiedenen Browsern.

Die Object.assign () -Methode wird verwendet, um die Werte aller aufzählbaren eigenen Eigenschaften von einem oder mehreren Quellobjekten in ein Zielobjekt zu kopieren. Das Zielobjekt wird zurückgegeben.

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, target object itself is changed.

Für nicht zu komplizierte Objekte können Sie JSON verwenden :

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

objMerge = JSON.stringify(obj1) + JSON.stringify(obj2);

// {"food": "pizza","car":"ford"}{"animal":"dog","car":"chevy"}

objMerge = objMerge.replace(/\}\{/, ","); //  \_ replace with comma for valid JSON

objMerge = JSON.parse(objMerge); // { food: 'pizza', animal: 'dog', car: 'chevy'}
// Of same keys in both objects, the last object's value is retained_/

Beachten Sie jedoch, dass in diesem Beispiel "} {" nicht innerhalb einer Zeichenfolge vorkommen darf !

Es gibt eine Bibliothek mit dem Namen deepmergeauf GitHub : Das scheint einige Traktion zu bekommen. Es ist ein eigenständiges Programm, das sowohl über den npm- als auch den bower-Paketmanager erhältlich ist.

Ich wäre geneigt, dies zu verwenden oder zu verbessern, anstatt Code aus Antworten einzufügen.

Der beste Weg, dies zu tun, besteht darin, eine geeignete Eigenschaft hinzuzufügen, die mit Object.defineProperty nicht aufzählbar ist.

Auf diese Weise können Sie weiterhin über Ihre Objekteigenschaften iterieren, ohne die neu erstellte "Erweiterung" zu haben, die Sie erhalten würden, wenn Sie die Eigenschaft mit Object.prototype.extend erstellen würden.

Hoffentlich hilft das:

Object.defineProperty (Object.prototype, "verlängern", {
    aufzählbar: falsch,
    Wert: Funktion (von) {
        var props = Object.getOwnPropertyNames (from);
        var dest = this;
        props.forEach (Funktion (Name) {
            if (name in dest) {
                var destination = Object.getOwnPropertyDescriptor (from, name);
                Object.defineProperty (Ziel, Name, Ziel);
            }}
        });
        gib das zurück;
    }}
});

Sobald Sie das zum Laufen gebracht haben, können Sie Folgendes tun:

var obj = {
    Name: 'Stapel',
    Ende: 'Überlauf'
}}
var Ersatz = {
    Name: 'Lager'
};

obj.extend (Ersatz);

Ich habe gerade hier einen Blog-Beitrag darüber geschrieben: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

Sie können einfach jQuery verwenden extend

var obj1 = { val1: false, limit: 5, name: "foo" };
var obj2 = { val2: true, name: "bar" };

jQuery.extend(obj1, obj2);

obj1Enthält jetzt alle Werte von obj1undobj2

Prototyp hat dies:

Object.extend = function(destination,source) {
    for (var property in source)
        destination[property] = source[property];
    return destination;
}

obj1.extend(obj2) wird tun was du willst.

** Das Zusammenführen von Objekten ist einfach mit Object.assigndem Spread- ...Operator **

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog', car: 'BMW' }
var obj3 = {a: "A"}


var mergedObj = Object.assign(obj1,obj2,obj3)
 // or using the Spread operator (...)
var mergedObj = {...obj1,...obj2,...obj3}

console.log(mergedObj);

Die Objekte werden von rechts nach links zusammengeführt. Dies bedeutet, dass Objekte mit identischen Eigenschaften wie die Objekte auf der rechten Seite überschrieben werden.

In diesem Beispiel obj2.carüberschreibtobj1.car

Nur wenn jemand die Google Closure Library verwendet :

goog.require('goog.object');
var a = {'a': 1, 'b': 2};
var b = {'b': 3, 'c': 4};
goog.object.extend(a, b);
// Now object a == {'a': 1, 'b': 3, 'c': 4};

Eine ähnliche Hilfsfunktion gibt es für das Array :

var a = [1, 2];
var b = [3, 4];
goog.array.extend(a, b); // Extends array 'a'
goog.array.concat(a, b); // Returns concatenation of array 'a' and 'b'

Ich habe die Methode von David Coallier erweitert:

• Es wurde die Möglichkeit hinzugefügt, mehrere Objekte zusammenzuführen
• Unterstützt tiefe Objekte
• Override-Parameter (wird erkannt, wenn der letzte Parameter ein Boolescher Wert ist)

Wenn override false ist, wird keine Eigenschaft überschrieben, es werden jedoch neue Eigenschaften hinzugefügt.

Verwendung: obj.merge (führt zusammen ... [, überschreiben]);

Hier ist mein Code:

Object.defineProperty(Object.prototype, "merge", {
    enumerable: false,
    value: function () {
        var override = true,
            dest = this,
            len = arguments.length,
            props, merge, i, from;

        if (typeof(arguments[arguments.length - 1]) === "boolean") {
            override = arguments[arguments.length - 1];
            len = arguments.length - 1;
        }

        for (i = 0; i < len; i++) {
            from = arguments[i];
            if (from != null) {
                Object.getOwnPropertyNames(from).forEach(function (name) {
                    var descriptor;

                    // nesting
                    if ((typeof(dest[name]) === "object" || typeof(dest[name]) === "undefined")
                            && typeof(from[name]) === "object") {

                        // ensure proper types (Array rsp Object)
                        if (typeof(dest[name]) === "undefined") {
                            dest[name] = Array.isArray(from[name]) ? [] : {};
                        }
                        if (override) {
                            if (!Array.isArray(dest[name]) && Array.isArray(from[name])) {
                                dest[name] = [];
                            }
                            else if (Array.isArray(dest[name]) && !Array.isArray(from[name])) {
                                dest[name] = {};
                            }
                        }
                        dest[name].merge(from[name], override);
                    } 

                    // flat properties
                    else if ((name in dest && override) || !(name in dest)) {
                        descriptor = Object.getOwnPropertyDescriptor(from, name);
                        if (descriptor.configurable) {
                            Object.defineProperty(dest, name, descriptor);
                        }
                    }
                });
            }
        }
        return this;
    }
});

Beispiele und Testfälle:

function clone (obj) {
    return JSON.parse(JSON.stringify(obj));
}
var obj = {
    name : "trick",
    value : "value"
};

var mergeObj = {
    name : "truck",
    value2 : "value2"
};

var mergeObj2 = {
    name : "track",
    value : "mergeObj2",
    value2 : "value2-mergeObj2",
    value3 : "value3"
};

assertTrue("Standard", clone(obj).merge(mergeObj).equals({
    name : "truck",
    value : "value",
    value2 : "value2"
}));

assertTrue("Standard no Override", clone(obj).merge(mergeObj, false).equals({
    name : "trick",
    value : "value",
    value2 : "value2"
}));

assertTrue("Multiple", clone(obj).merge(mergeObj, mergeObj2).equals({
    name : "track",
    value : "mergeObj2",
    value2 : "value2-mergeObj2",
    value3 : "value3"
}));

assertTrue("Multiple no Override", clone(obj).merge(mergeObj, mergeObj2, false).equals({
    name : "trick",
    value : "value",
    value2 : "value2",
    value3 : "value3"
}));

var deep = {
    first : {
        name : "trick",
        val : "value"
    },
    second : {
        foo : "bar"
    }
};

var deepMerge = {
    first : {
        name : "track",
        anotherVal : "wohoo"
    },
    second : {
        foo : "baz",
        bar : "bam"
    },
    v : "on first layer"
};

assertTrue("Deep merges", clone(deep).merge(deepMerge).equals({
    first : {
        name : "track",
        val : "value",
        anotherVal : "wohoo"
    },
    second : {
        foo : "baz",
        bar : "bam"
    },
    v : "on first layer"
}));

assertTrue("Deep merges no override", clone(deep).merge(deepMerge, false).equals({
    first : {
        name : "trick",
        val : "value",
        anotherVal : "wohoo"
    },
    second : {
        foo : "bar",
        bar : "bam"
    },
    v : "on first layer"
}));

var obj1 = {a: 1, b: "hello"};
obj1.merge({c: 3});
assertTrue(obj1.equals({a: 1, b: "hello", c: 3}));

obj1.merge({a: 2, b: "mom", d: "new property"}, false);
assertTrue(obj1.equals({a: 1, b: "hello", c: 3, d: "new property"}));

var obj2 = {};
obj2.merge({a: 1}, {b: 2}, {a: 3});
assertTrue(obj2.equals({a: 3, b: 2}));

var a = [];
var b = [1, [2, 3], 4];
a.merge(b);
assertEquals(1, a[0]);
assertEquals([2, 3], a[1]);
assertEquals(4, a[2]);


var o1 = {};
var o2 = {a: 1, b: {c: 2}};
var o3 = {d: 3};
o1.merge(o2, o3);
assertTrue(o1.equals({a: 1, b: {c: 2}, d: 3}));
o1.b.c = 99;
assertTrue(o2.equals({a: 1, b: {c: 2}}));

// checking types with arrays and objects
var bo;
a = [];
bo = [1, {0:2, 1:3}, 4];
b = [1, [2, 3], 4];

a.merge(b);
assertTrue("Array stays Array?", Array.isArray(a[1]));

a = [];
a.merge(bo);
assertTrue("Object stays Object?", !Array.isArray(a[1]));

a = [];
a.merge(b);
a.merge(bo);
assertTrue("Object overrides Array", !Array.isArray(a[1]));

a = [];
a.merge(b);
a.merge(bo, false);
assertTrue("Object does not override Array", Array.isArray(a[1]));

a = [];
a.merge(bo);
a.merge(b);
assertTrue("Array overrides Object", Array.isArray(a[1]));

a = [];
a.merge(bo);
a.merge(b, false);
assertTrue("Array does not override Object", !Array.isArray(a[1]));

Meine Methode equals finden Sie hier: Objektvergleich in JavaScript

In MooTools gibt es Object.merge () :

Object.merge(obj1, obj2);

In Ext JS 4 kann dies wie folgt durchgeführt werden:

var mergedObject = Ext.Object.merge(object1, object2)

// Or shorter:
var mergedObject2 = Ext.merge(object1, object2)

Siehe Zusammenführen (Objekt): Objekt .

Wow .. dies ist der erste StackOverflow-Beitrag, den ich mit mehreren Seiten gesehen habe. Entschuldigung für das Hinzufügen einer weiteren "Antwort"

Diese Methode ist für ES5 und früher - es gibt viele andere Antworten für ES6.

Ich habe kein "tiefes" Objekt gesehen, das unter Verwendung der argumentsEigenschaft zusammengeführt wurde. Hier ist meine Antwort - kompakt und rekursiv , sodass unbegrenzte Objektargumente übergeben werden können:

function extend() {
    for (var o = {}, i = 0; i < arguments.length; i++) {
        // if (arguments[i].constructor !== Object) continue;
        for (var k in arguments[i]) {
            if (arguments[i].hasOwnProperty(k)) {
                o[k] = arguments[i][k].constructor === Object ? extend(o[k] || {}, arguments[i][k]) : arguments[i][k];
            }
        }
    }
    return o;
}

Der auskommentierte Teil ist optional. Es werden einfach übergebene Argumente übersprungen, die keine Objekte sind (um Fehler zu vermeiden).

Beispiel:

extend({
    api: 1,
    params: {
        query: 'hello'
    }
}, {
    params: {
        query: 'there'
    }
});

// outputs {api: 1, params: {query: 'there'}}

Diese Antwort ist jetzt nur noch ein Tropfen auf den heißen Stein ...

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

// result
result: {food: "pizza", car: "ford", animal: "dog"}

Verwenden von jQuery.extend () - Link

// Merge obj1 & obj2 to result
var result1 = $.extend( {}, obj1, obj2 );

Verwenden von _.merge () - Link

// Merge obj1 & obj2 to result
var result2 = _.merge( {}, obj1, obj2 );

Verwenden von _.extend () - Link

// Merge obj1 & obj2 to result
var result3 = _.extend( {}, obj1, obj2 );

Verwenden von Object.assign () ECMAScript 2015 (ES6) - Link

// Merge obj1 & obj2 to result
var result4 = Object.assign( {}, obj1, obj2 );

Ausgabe von allen

obj1: { animal: 'dog' }
obj2: { food: 'pizza', car: 'ford' }
result1: {food: "pizza", car: "ford", animal: "dog"}
result2: {food: "pizza", car: "ford", animal: "dog"}
result3: {food: "pizza", car: "ford", animal: "dog"}
result4: {food: "pizza", car: "ford", animal: "dog"}

Basierend auf der Antwort von Markus und vsync ist dies eine erweiterte Version. Die Funktion akzeptiert eine beliebige Anzahl von Argumenten. Es kann verwendet werden, um Eigenschaften für DOM festzulegen Knoten und tiefe Kopien von Werten zu . Das erste Argument wird jedoch durch Bezugnahme angegeben.

Um einen DOM-Knoten zu erkennen, wird die Funktion isDOMNode () verwendet (siehe Frage zum Stapelüberlauf JavaScript isDOM - Wie können Sie überprüfen, ob ein JavaScript-Objekt ein DOM-Objekt ist? )

Es wurde in Opera 11, Firefox 6, Internet Explorer 8 und Google Chrome 16 getestet .

Code

function mergeRecursive() {

  // _mergeRecursive does the actual job with two arguments.
  var _mergeRecursive = function (dst, src) {
    if (isDOMNode(src) || typeof src !== 'object' || src === null) {
      return dst;
    }

    for (var p in src) {
      if (!src.hasOwnProperty(p))
        continue;
      if (src[p] === undefined)
        continue;
      if ( typeof src[p] !== 'object' || src[p] === null) {
        dst[p] = src[p];
      } else if (typeof dst[p]!=='object' || dst[p] === null) {
        dst[p] = _mergeRecursive(src[p].constructor===Array ? [] : {}, src[p]);
      } else {
        _mergeRecursive(dst[p], src[p]);
      }
    }
    return dst;
  }

  // Loop through arguments and merge them into the first argument.
  var out = arguments[0];
  if (typeof out !== 'object' || out === null)
    return out;
  for (var i = 1, il = arguments.length; i < il; i++) {
    _mergeRecursive(out, arguments[i]);
  }
  return out;
}

Einige Beispiele

Legen Sie innerHTML und den Stil eines HTML-Elements fest

mergeRecursive(
  document.getElementById('mydiv'),
  {style: {border: '5px solid green', color: 'red'}},
  {innerHTML: 'Hello world!'});

Arrays und Objekte zusammenführen. Beachten Sie, dass undefined verwendet werden kann, um Werte im linken Array / Objekt beizubehalten.

o = mergeRecursive({a:'a'}, [1,2,3], [undefined, null, [30,31]], {a:undefined, b:'b'});
// o = {0:1, 1:null, 2:[30,31], a:'a', b:'b'}

Alle Argumente, die kein JavaScript-Objekt sind (einschließlich null), werden ignoriert. Mit Ausnahme des ersten Arguments werden auch DOM-Knoten verworfen. Beachten Sie, dass Zeichenfolgen, die wie neue Zeichenfolgen () erstellt wurden, tatsächlich Objekte sind.

o = mergeRecursive({a:'a'}, 1, true, null, undefined, [1,2,3], 'bc', new String('de'));
// o = {0:'d', 1:'e', 2:3, a:'a'}

Wenn Sie zwei Objekte zu einem neuen zusammenführen möchten (ohne eines der beiden zu beeinflussen), geben Sie {} als erstes Argument an

var a={}, b={b:'abc'}, c={c:'cde'}, o;
o = mergeRecursive(a, b, c);
// o===a is true, o===b is false, o===c is false

Bearbeiten (von ReaperSoon):

Arrays auch zusammenführen

function mergeRecursive(obj1, obj2) {
  if (Array.isArray(obj2)) { return obj1.concat(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 if (Array.isArray(obj2[p])) {
        obj1[p] = obj1[p].concat(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;
}

Sie sollten lodash die Verwendung defaultsDeep

_.defaultsDeep({ 'user': { 'name': 'barney' } }, { 'user': { 'name': 'fred', 'age': 36 } });
// → { 'user': { 'name': 'barney', 'age': 36 } }

Führen Sie mit Underscore.js Folgendes aus , um ein Array von Objekten zusammenzuführen:

var arrayOfObjects = [ {a:1}, {b:2, c:3}, {d:4} ];
_(arrayOfObjects).reduce(function(memo, o) { return _(memo).extend(o); });

Es fuehrt zu:

Object {a: 1, b: 2, c: 3, d: 4}