Saya harus dapat menggabungkan dua objek JavaScript (sangat sederhana) saat runtime. Misalnya saya ingin:

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

obj1.merge(obj2);

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

Apakah ada yang punya skrip untuk ini atau mengetahui cara yang dibangun untuk melakukan ini? Saya tidak perlu rekursi, dan saya tidak perlu menggabungkan fungsi, hanya metode pada objek datar.

ECMAScript 2018 Metode Standar

Anda akan menggunakan penyebaran objek :

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

mergedsekarang penyatuan obj1dan obj2. Properti di obj2akan menimpa mereka di 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};

Berikut ini juga dokumentasi MDN untuk sintaks ini. Jika Anda menggunakan babel, Anda membutuhkan plugin babel-plugin-transform-object-rest-spread agar bisa berfungsi.

ECMAScript 2015 (ES6) Metode Standar

/* 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);

(lihat Referensi JavaScript MDN )

Metode untuk ES5 dan Sebelumnya

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

Perhatikan bahwa ini hanya akan menambahkan semua atribut obj2untuk obj1yang tidak mungkin apa yang Anda inginkan jika Anda masih ingin menggunakan dimodifikasi obj1.

Jika Anda menggunakan kerangka kerja yang hancur di seluruh prototipe Anda maka Anda harus lebih suka dengan cek suka hasOwnProperty, tetapi kode itu akan bekerja untuk 99% kasus.

Fungsi contoh:

/**
 * 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 juga memiliki utilitas untuk ini: http://api.jquery.com/jQuery.extend/ .

Diambil dari dokumentasi jQuery:

// 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" }

Kode di atas akan mengubah nama objek yang adasettings .

Jika Anda ingin membuat objek baru tanpa mengubah argumen, gunakan ini:

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.

The Harmony ECMAScript 2015 (ES6) menspesifikasikan Object.assignyang akan melakukan hal ini.

Object.assign(obj1, obj2);

Dukungan browser saat ini menjadi lebih baik , tetapi jika Anda sedang mengembangkan untuk browser yang tidak memiliki dukungan, Anda dapat menggunakan polyfill .

Saya mencari kode untuk menggabungkan properti objek dan berakhir di sini. Namun karena tidak ada kode untuk penggabungan rekursif saya menulis sendiri. (Mungkin perpanjangan jQuery adalah BTW rekursif?) Bagaimanapun, mudah-mudahan orang lain akan merasakan manfaatnya juga.

(Sekarang kode tidak digunakan Object.prototype:)

Kode

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

Sebuah contoh

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

Menghasilkan objek seperti o3

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

Perhatikan bahwa underscore.js's - extendmetode melakukan ini dalam satu baris:

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

Mirip dengan jQuery ext (), Anda memiliki fungsi yang sama di AngularJS :

// 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);

Saya perlu menggabungkan objek hari ini, dan pertanyaan ini (dan jawaban) banyak membantu saya. Saya mencoba beberapa jawaban, tetapi tidak ada yang sesuai dengan kebutuhan saya, jadi saya menggabungkan beberapa jawaban, menambahkan sesuatu sendiri dan muncul dengan fungsi gabungan baru. Ini dia:

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

Beberapa contoh penggunaan:

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

Anda dapat menggunakan properti penyebaran objek — saat ini proposal ECMAScript tahap 3.

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

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

Solusi yang diberikan harus diubah untuk memeriksa source.hasOwnProperty(property)dalam for..inloop sebelum menugaskan - jika tidak, Anda berakhir menyalin properti dari seluruh rantai prototipe, yang jarang diinginkan ...

Menggabungkan properti objek N dalam satu baris kode

Sebuah Object.assignmetode adalah bagian dari 2015 standar ECMAScript (ES6) dan melakukan apa yang Anda butuhkan. ( IEtidak didukung)

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

Metode Object.assign () digunakan untuk menyalin nilai-nilai semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target.

Baca lebih banyak...

The polyfill untuk mendukung browser lama:

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

Dua berikut ini mungkin merupakan titik awal yang baik. lodash juga memiliki fungsi penyesuai untuk kebutuhan khusus tersebut!

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

Omong-omong, apa yang Anda semua lakukan adalah menimpa properti, bukan menggabungkan ...

Ini adalah bagaimana area objek JavaScript benar-benar digabungkan: Hanya kunci dalam toobjek yang bukan objek itu sendiri yang akan ditimpa oleh from. Yang lainnya akan benar - benar digabungkan . Tentu saja Anda dapat mengubah perilaku ini untuk tidak menimpa apa pun yang hanya ada jika to[n] is undefined, dll ...:

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

Pemakaian:

var merged = realMerge(obj1, obj2);

Inilah tikaman saya yang mana

1. Mendukung penggabungan yang dalam
2. Tidak bermutasi argumen
3. Membawa sejumlah argumen
4. Tidak memperpanjang prototipe objek
5. Tidak bergantung pada perpustakaan lain ( jQuery , MooTools , Underscore.js , dll.)
6. Termasuk cek untuk hasOwnProperty

7. Pendek :)

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

Contoh:

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)

Ini adalah teknologi baru, bagian dari standar ECMAScript 2015 (ES6). Spesifikasi teknologi ini telah diselesaikan, tetapi periksa tabel kompatibilitas untuk penggunaan dan status implementasi di berbagai browser.

Metode Object.assign () digunakan untuk menyalin nilai-nilai semua properti enumerable sendiri dari satu atau lebih objek sumber ke objek target. Ini akan mengembalikan objek target.

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.

Untuk objek yang tidak terlalu rumit, Anda bisa menggunakan JSON :

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_/

Harap diingat bahwa dalam contoh ini "} {" tidak boleh muncul dalam string!

Ada sebuah perpustakaan yang disebut deepmergedi GitHub : Itu tampaknya akan mendapatkan beberapa traksi. Ini adalah mandiri, tersedia melalui npm dan manajer paket bower .

Saya akan cenderung menggunakan atau memperbaiki kode ini daripada menyalin-menempelkan kode dari jawaban.

Cara terbaik bagi Anda untuk melakukan ini adalah menambahkan properti yang tepat yang tidak dapat dihitung menggunakan Object.defineProperty.

Dengan cara ini Anda masih akan dapat beralih di atas properti objek Anda tanpa memiliki "perluasan" yang baru dibuat yang akan Anda dapatkan jika Anda membuat properti dengan Object.prototype.extend.

Semoga ini membantu:

Object.defineProperty (Object.prototype, "extended", {
    enumerable: false,
    value: function (from) {
        var props = Object.getOwnPropertyNames (dari);
        var dest = ini;
        props.forEach (fungsi (nama) {
            if (name in dest) {
                var destination = Object.getOwnPropertyDescriptor (dari, nama);
                Object.defineProperty (dest, nama, tujuan);
            }
        });
        kembalikan ini;
    }
});

Setelah Anda berhasil, Anda dapat melakukan:

var obj = {
    nama: 'tumpukan',
    selesai: 'melimpah'
}
penggantian var = {
    nama: 'stok'
};

obj.extend (penggantian);

Saya baru saja menulis posting blog di sini: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

Anda cukup menggunakan jQuery extend

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

jQuery.extend(obj1, obj2);

Sekarang obj1berisi semua nilai obj1danobj2

Prototipe memiliki ini:

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

obj1.extend(obj2) akan melakukan apa yang Anda inginkan.

** Objek penggabungan mudah digunakan Object.assignatau ...operator spread **

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

Objek digabung dari kanan ke kiri, ini berarti bahwa objek yang memiliki properti identik sebagai objek di sebelah kanannya akan ditimpa.

Dalam contoh ini obj2.carmenimpaobj1.car

Hanya jika ada yang menggunakan Perpustakaan Penutupan Google :

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

Fungsi pembantu serupa ada untuk 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'

Saya memperpanjang metode David Coallier:

• Menambahkan kemungkinan untuk menggabungkan beberapa objek
• Mendukung benda yang dalam
• menimpa parameter (yang terdeteksi jika parameter terakhir adalah boolean)

Jika override salah, tidak ada properti yang akan ditimpa tetapi properti baru akan ditambahkan.

Penggunaan: obj.merge (gabungan ... [, ganti]];

Ini kode saya:

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

Contoh dan TestCases:

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]));

Metode equals saya dapat ditemukan di sini: Perbandingan objek dalam JavaScript

Di Mootools , ada Object.merge () :

Object.merge(obj1, obj2);

Dalam Ext JS 4 dapat dilakukan sebagai berikut:

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

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

Lihat gabungan (objek): Objek .

Wow .. ini adalah posting StackOverflow pertama yang saya lihat dengan beberapa halaman. Permintaan maaf karena menambahkan "jawaban" lainnya

Metode ini untuk ES5 & Sebelumnya - ada banyak jawaban lain yang membahas ES6.

Saya tidak melihat objek "dalam" yang menyatu menggunakan argumentsproperti. Inilah jawaban saya - ringkas & rekursif , yang memungkinkan argumen objek tak terbatas dilewatkan:

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

Bagian yang dikomentari adalah opsional .. itu hanya akan melewati argumen yang dilewati yang bukan objek (mencegah kesalahan).

Contoh:

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

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

Jawaban ini sekarang hanyalah setetes air di lautan ...

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

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

Menggunakan jQuery.extend () - Tautan

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

Menggunakan _.merge () - Tautan

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

Menggunakan _.extend () - Tautan

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

Menggunakan Object.assign () ECMAScript 2015 (ES6) - Tautan

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

Keluaran semua

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

Berdasarkan jawaban Markus ' dan vsync' , ini adalah versi yang diperluas. Fungsi ini mengambil sejumlah argumen. Ini dapat digunakan untuk mengatur properti node DOM dan membuat salinan nilai yang dalam. Namun, argumen pertama diberikan sebagai referensi.

Untuk mendeteksi simpul DOM, fungsi isDOMNode () digunakan (lihat pertanyaan Stack Overflow JavaScript isDOM - Bagaimana Anda memeriksa apakah Obyek JavaScript adalah Obyek DOM? )

Itu diuji di Opera 11, Firefox 6, Internet Explorer 8 dan Google Chrome 16.

Kode

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

Beberapa contoh

Tetapkan innerHTML dan gaya Elemen HTML

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

Gabungkan array dan objek. Perhatikan bahwa undefined dapat digunakan untuk mempertahankan nilai dalam lefthand array / object.

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

Argumen apa pun yang tidak menjadi objek JavaScript (termasuk nol) akan diabaikan. Kecuali untuk argumen pertama, node DOM juga dibuang. Waspadalah bahwa string yaitu, dibuat seperti String baru () sebenarnya adalah objek.

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

Jika Anda ingin menggabungkan dua objek menjadi yang baru (tanpa memengaruhi salah satu dari keduanya) berikan {} sebagai argumen pertama

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

Edit (oleh ReaperSoon):

Untuk juga menggabungkan array

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

Anda harus menggunakan lodash's defaultseep

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

Dengan Underscore.js , untuk menggabungkan berbagai objek, lakukan:

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

Ini menghasilkan:

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