Çalışma zamanında iki (çok basit) JavaScript nesnelerini birleştirmek gerekir. Örneğin:

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

obj1.merge(obj2);

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

Herkes bunun için bir komut dosyası var mı veya bunu yapmak için yerleşik bir yol biliyor mu? Özyinelemeye ihtiyacım yok ve işlevleri birleştirmem gerekmiyor, sadece düz nesnelerdeki yöntemler.

ECMAScript 2018 Standart Yöntemi

Nesne yayılımını kullanırsınız :

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

mergedşimdi obj1ve obj2. İçindeki özellikler, içindeki özelliklerin obj2üzerine yazacak 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};

Ayrıca, bu sözdizimi için MDN belgeleri de bulunmaktadır. Babel kullanıyorsanız, çalışması için babel-plugin-transform-object-rest-spread eklentisine ihtiyacınız olacaktır.

ECMAScript 2015 (ES6) Standart Yöntem

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

(bkz. MDN JavaScript Başvurusu )

ES5 ve Önceki Yöntemler

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

Bu basitçe tüm özelliklerini katacak Not obj2için obj1hala değiştirilmemiş kullanmak istiyorsanız istediğini olmayabilir hangi obj1.

Prototiplerinizin her yerine hitap eden bir çerçeve kullanıyorsanız, o zaman çekler gibi meraklı olmanız gerekir hasOwnProperty, ancak bu kod vakaların% 99'unda çalışacaktır.

Örnek fonksiyon:

/**
 * 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'de bunun için bir yardımcı program vardır: http://api.jquery.com/jQuery.extend/ .

JQuery belgelerinden alınmıştır:

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

Yukarıdaki kod adlı mevcut nesneyi değiştirir settings.

İki bağımsız değişkenden birini değiştirmeden yeni bir nesne oluşturmak istiyorsanız , şunu kullanın:

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.

Harmony 2015 (ES6) ECMAscript belirliyorsa Object.assignyapacağız.

Object.assign(obj1, obj2);

Mevcut tarayıcı desteği iyileşiyor , ancak desteği olmayan tarayıcılar için geliştiriyorsanız, bir çoklu dolgu kullanabilirsiniz .

Kod nesne özelliklerini birleştirmek için googled ve burada sona erdi. Ancak özyinelemeli birleştirme için herhangi bir kod olmadığından bunu kendim yazdım. (Belki jQuery genişletme özyinelemeli BTW?) Her neyse, umarım başka biri de yararlı olacaktır.

(Şimdi kod kullanmıyor Object.prototype :)

kod

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

Bir örnek

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

O3 gibi nesne üretir

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

Not underscore.js's extend-todhod bunu bir astarda yapar:

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

JQuery expand () 'a benzer şekilde, AngularJS'de aynı işleve sahipsiniz :

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

Bugün nesneleri birleştirmem gerekiyor ve bu soru (ve cevaplar) bana çok yardımcı oldu. Bazı cevapları denedim, ancak hiçbiri ihtiyaçlarıma uymadı, bu yüzden bazı cevapları birleştirdim, kendim bir şeyler ekledim ve yeni bir birleştirme işlevi buldum. İşte burada:

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

Bazı örnek kullanımlar:

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

Nesne yayma özelliklerini kullanabilirsiniz - şu anda bir aşama 3 ECMAScript teklifi.

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

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

Verilen çözümler kontrol etmek modifiye edilmelidir source.hasOwnProperty(property)içinde for..inatamadan önce döngüler - Aksi, nadiren istenen tüm prototip zincirinin, özelliklerini kopyalayarak sonunda ...

Bir kod satırındaki N nesnelerinin özelliklerini birleştirme

Bir Object.assignyöntem ECMAScript 2015 (ES6) standardının bir parçasıdır ve tam olarak ihtiyacınız olanı yapar. ( IEdesteklenmez)

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

Object.assign () yöntemi, numaralandırılabilir tüm özelliklerin değerlerini bir veya daha fazla kaynak nesneden bir hedef nesneye kopyalamak için kullanılır.

Daha fazla oku...

Polyfill eski tarayıcıları desteklemek için:

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

Aşağıdaki ikisi muhtemelen iyi bir başlangıç ​​noktasıdır. lodash ayrıca bu özel ihtiyaçlar için bir özelleştirme işlevine sahiptir!

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

Bu arada, yaptığınız tek şey özelliklerin üzerine yazmak, birleştirmek değil ...

JavaScript nesneleri alanı gerçekten bu şekilde birleştirilir: Yalnızca tonesnenin kendisinde olmayan nesnelerin üzerine yazılır from. Diğer her şey gerçekten birleştirilecek . Tabii ki bu davranışı sadece to[n] is undefined, vb. Gibi var olan herhangi bir şeyin üzerine yazmamak için değiştirebilirsiniz ...

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

Kullanımı:

var merged = realMerge(obj1, obj2);

İşte benim bıçak

1. Derin birleşmeyi destekler
2. Değişkenleri değiştirmez
3. Herhangi bir sayıda argüman alır
4. Nesne prototipini genişletmez
5. Başka bir kütüphaneye bağlı değildir ( jQuery , MooTools , Underscore.js , vb.)
6. HasOwnProperty kontrolünü içerir

7. Kısa :)

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

Misal:

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)

Bu, ECMAScript 2015 (ES6) standardının bir parçası olan yeni bir teknolojidir. Bu teknolojinin özellikleri tamamlanmıştır, ancak çeşitli tarayıcılarda kullanım ve uygulama durumu için uyumluluk tablosunu kontrol edin.

Object.assign () yöntemi, numaralandırılabilir tüm özelliklerin değerlerini bir veya daha fazla kaynak nesneden bir hedef nesneye kopyalamak için kullanılır. Hedef nesneyi döndürür.

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.

Çok karmaşık olmayan nesneler için JSON'u kullanabilirsiniz :

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

Bu örnekte "} {" bir dize içinde gerçekleşmemesi gerektiğini unutmayın !

Adında bir kütüphane var deepmergeüzerinde GitHub'dan : Bu biraz çekiş alıyor gibi görünüyor. Bu, hem npm'de hem de mevcut olan bağımsızdır bower paket yöneticileri tarafından .

Ben cevapları kopya yapıştırma kodu yerine bunu kullanmak veya geliştirmek eğiliminde olacaktır.

Bunu yapmanın en iyi yolu, Object.defineProperty kullanarak numaralandırılamayan uygun bir özellik eklemektir.

Bu şekilde, özelliği Object.prototype.extend ile oluştursaydınız alacağınız yeni oluşturulan "genişletme" ye sahip olmadan nesnelerinizin özellikleri üzerinde yineleme yapabileceksiniz.

Umarım bu yardımcı olur:

Object.defineProperty (Object.prototype, "genişlet", {
    numaralandırılabilir: yanlış,
    değer: function (from) {
        var props = Object.getOwnPropertyNames (from);
        var dest = bu;
        props.forEach (işlev (ad) {
            if (dest içinde ad) {
                var destination = Object.getOwnPropertyDescriptor (from, ad);
                Object.defineProperty (hedef, ad, hedef);
            }
        });
        bunu iade et;
    }
});

Bunu yaptıktan sonra şunları yapabilirsiniz:

var obj = {
    isim: 'yığın',
    bitiş: 'taşma'
}
var değiştirme = {
    isim: 'stok'
};

obj.extend (değiştirme);

Buraya bir blog yazısı yazdım: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

Sadece jQuery kullanabilirsiniz extend

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

jQuery.extend(obj1, obj2);

Şimdi obj1içerdiği tüm değerleri obj1veobj2

Prototip şu şekildedir :

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

obj1.extend(obj2) istediğini yapacak.

** Nesneleri birleştirmek Object.assignveya dağıtma ...operatörünü kullanmak kolaydır **

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

Nesneler sağdan sola birleştirilir, bu da sağlarındaki nesnelerle aynı özelliklere sahip nesnelerin geçersiz kılınacağı anlamına gelir.

Bu örnekte obj2.cargeçersiz kılmalarobj1.car

Birisi Google Closure Library kullanıyorsa :

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

Dizi için benzer yardımcı işlevi vardır :

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'

David Coallier'ın yöntemini genişlettim:

• Birden çok nesneyi birleştirme olanağı eklendi
• Derin nesneleri destekler
• geçersiz kılma parametresi (son parametre bir boole ise algılanır)

Geçersiz kılma yanlışsa, hiçbir özellik geçersiz kılmaz, ancak yeni özellikler eklenir.

Kullanım: obj.merge (birleşir ... [, geçersiz kıl]);

İşte benim kod:

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

Örnekler ve 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]));

Eşittir yöntemim burada bulunabilir: JavaScript'te nesne karşılaştırması

Gelen mooTools , orada Object.merge () :

Object.merge(obj1, obj2);

In Ext JS şöyle 4'e bu yapılabilir:

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

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

Bkz. Merge (object): Object .

Vay be .. Bu, birden fazla sayfa ile gördüğüm ilk StackOverflow gönderi. Başka bir "cevap" eklemek için özür dilerim

Bu yöntem ES5 ve Önceki sürümler içindir - ES6'ya yönelik birçok başka cevap vardır.

Özelliği kullanan bir "derin" nesne görmedim arguments. İşte cevabım - sınırsız nesne argümanlarının iletilmesine izin veren kompakt ve özyinelemeli :

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

Yorumlanan kısım isteğe bağlıdır .. basitçe nesne olmayan (hataları önleyen) geçirilen argümanları atlayacaktır.

Misal:

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

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

Bu cevap şimdi okyanusta bir damla ...

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

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

JQuery.extend () kullanma - Bağlantı

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

_.Merge () kullanma - Bağlantı

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

_.Extend () kullanma - Bağlantı

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

Object.assign () ECMAScript 2015 (ES6) Kullanma - Bağlantı

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

Hepsinin çıktısı

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

Markus ' ve vsync' cevabına dayanarak , bu genişletilmiş bir versiyon. İşlev herhangi bir sayıda bağımsız değişken alır. DOM üzerindeki özellikleri ayarlamak için kullanılabilir düğümlerindeki ve değerlerin derin kopyalarını oluşturur. Ancak, ilk argüman referans ile verilmiştir.

Bir DOM düğümünü algılamak için isDOMNode () işlevi kullanılır (bkz. Yığın Taşması sorusu JavaScript isDOM - Bir JavaScript Nesnesinin DOM Nesnesi olup olmadığını nasıl kontrol edersiniz? )

Opera 11, Firefox 6, Internet Explorer 8 ve Google Chrome 16'da test edildi .

kod

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

Bazı örnekler

İnnerHTML ve HTML Öğesinin stilini ayarlama

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

Dizileri ve nesneleri birleştir. Undefined öğesinin soldaki dizi / nesnedeki değerleri korumak için kullanılabileceğini unutmayın.

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

JavaScript nesnesini taşımayan argümanlar (null dahil) yok sayılır. İlk argüman dışında DOM düğümleri de atılır. Yeni String () gibi oluşturulan dizelerin aslında nesneler olduğunu unutmayın.

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

İki nesneyi yenisiyle birleştirmek istiyorsanız (ikisini etkilemeden) ilk argüman olarak {} sağlayın

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

Düzenle (ReaperSoon tarafından):

Dizileri birleştirmek için

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

Lodash'ın varsayılanlarını kullanmalısınız

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

İle Underscore.js , nesneleri dizisi birleştirme yapın:

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

Sonuç:

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