Eu preciso ser capaz de mesclar dois objetos JavaScript (muito simples) em tempo de execução. Por exemplo, eu gostaria de:

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

obj1.merge(obj2);

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

Alguém tem um script para isso ou conhece uma maneira integrada de fazer isso? Não preciso de recursão e não preciso mesclar funções, apenas métodos em objetos simples.

Método Padrão ECMAScript 2018

Você usaria a propagação de objeto :

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

mergedagora é a união de obj1e obj2. As propriedades em obj2substituirão as que estão em 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};

Aqui também está a documentação MDN para esta sintaxe. Se você estiver usando o babel, precisará do plug-in babel-plugin-transform-object-rest-spread para que ele funcione.

Método Padrão ECMAScript 2015 (ES6)

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

(consulte Referência JavaScript MDN )

Método para ES5 e anteriores

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

Note que isso irá simplesmente adicionar todos os atributos de obj2que obj1o que pode não ser o que você quer se você ainda quiser usar o não modificada obj1.

Se você estiver usando uma estrutura que excreta todos os seus protótipos, será necessário ficar mais sofisticado com verificações como hasOwnProperty, mas esse código funcionará em 99% dos casos.

Exemplo de função:

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

O jQuery também possui um utilitário para isso: http://api.jquery.com/jQuery.extend/ .

Retirado da documentação do 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" }

O código acima irá alterar o objeto existente nomeado settings.

Se você deseja criar um novo objeto sem modificar nenhum argumento, use este:

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.

O Harmony ECMAScript 2015 (ES6) especifica Object.assignquem fará isso.

Object.assign(obj1, obj2);

O suporte atual ao navegador está melhorando , mas se você estiver desenvolvendo para navegadores sem suporte, poderá usar um polyfill .

Pesquisei no código o código para mesclar propriedades do objeto e acabei aqui. No entanto, como não havia nenhum código para mesclagem recursiva, eu mesmo o escrevi. (Talvez o jQuery extend seja BTW recursivo?) De qualquer forma, espero que alguém ache isso útil também.

(Agora o código não usa 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;
}

Um exemplo

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

Produz o objeto o3 como

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

Observe que underscore.js's- extendmethod faz isso em uma linha:

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

Semelhante ao jQuery extend (), você tem a mesma função no 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);

Preciso mesclar objetos hoje, e essa pergunta (e respostas) me ajudou muito. Tentei algumas das respostas, mas nenhuma delas atendia às minhas necessidades, então combinei algumas, adicionei algo e criei uma nova função de mesclagem. Aqui está:

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

Alguns exemplos de uso:

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

Você pode usar propriedades de propagação de objeto - atualmente uma proposta de estágio 3 do ECMAScript.

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

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

As soluções fornecidas devem ser modificadas para verificar source.hasOwnProperty(property)os for..inloops antes da atribuição - caso contrário, você acaba copiando as propriedades de toda a cadeia de protótipos, o que raramente é desejado ...

Mesclar propriedades de N objetos em uma linha de código

Um Object.assignmétodo faz parte do padrão ECMAScript 2015 (ES6) e faz exatamente o que você precisa. ( IEnão suportado)

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

O método Object.assign () é usado para copiar os valores de todas as propriedades enumeráveis ​​de um ou mais objetos de origem para um objeto de destino.

Consulte Mais informação...

O polyfill para suportar navegadores mais antigos:

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

Os dois seguintes são provavelmente um bom ponto de partida. O lodash também possui uma função de personalização para essas necessidades especiais!

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

A propósito, tudo o que você está fazendo é sobrescrever propriedades, não mesclar ...

É assim que a área de objetos JavaScript realmente é mesclada: somente as chaves no toobjeto que não são objetos serão sobrescritas from. Todo o resto será realmente mesclado . Obviamente, você pode alterar esse comportamento para não substituir nada que exista apenas se 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;
};

Uso:

var merged = realMerge(obj1, obj2);

Aqui está minha facada que

1. Suporta mesclagem profunda
2. Não modifica argumentos
3. Leva qualquer número de argumentos
4. Não estende o protótipo de objeto
5. Não depende de outra biblioteca ( jQuery , MooTools , Underscore.js , etc.)
6. Inclui verificação para hasOwnProperty

7. É curto :)

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

Exemplo:

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)

Esta é uma nova tecnologia, parte do padrão ECMAScript 2015 (ES6). A especificação dessa tecnologia foi finalizada, mas verifique a tabela de compatibilidade quanto ao status de uso e implementação em vários navegadores.

O método Object.assign () é usado para copiar os valores de todas as propriedades enumeráveis ​​de um ou mais objetos de origem para um objeto de destino. Ele retornará o objeto de destino.

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.

Para objetos não muito complicados, você pode usar 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_/

Lembre-se de que neste exemplo "} {" não deve ocorrer dentro de uma string!

Há uma biblioteca chamada deepmergeno GitHub : Isso parece estar ficando alguma tração. É autônomo, disponível através dos gerenciadores de pacotes npm e bower.

Eu estaria inclinado a usar ou melhorar isso em vez de copiar e colar o código das respostas.

A melhor maneira de fazer isso é adicionar uma propriedade adequada que não seja enumerável usando Object.defineProperty.

Dessa forma, você ainda poderá iterar nas propriedades dos objetos sem ter o "estender" recém-criado que você obteria se criasse a propriedade com Object.prototype.extend.

Espero que isso ajude:

Object.defineProperty (Object.prototype, "extend", {
    enumerável: false,
    value: function (from) {
        var props = Object.getOwnPropertyNames (from);
        var dest = isto;
        props.forEach (function (name) {
            if (nome no destino) {
                var destination = Object.getOwnPropertyDescriptor (de, nome);
                Object.defineProperty (destino, nome, destino);
            }
        });
        devolva isso;
    }
});

Depois de ter esse trabalho, você pode fazer:

var obj = {
    nome: 'pilha',
    acabamento: 'estouro'
}
substituição de var = {
    nome: 'estoque'
};

obj.extend (substituição);

Acabei de escrever um post sobre o assunto aqui: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

Você pode simplesmente usar o jQuery extend

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

jQuery.extend(obj1, obj2);

Agora obj1contém todos os valores de obj1eobj2

O protótipo possui:

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

obj1.extend(obj2) fará o que você quiser.

** A fusão de objetos é simples de usar Object.assignou o ...operador 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);

Os objetos são mesclados da direita para a esquerda, isso significa que os objetos que possuem propriedades idênticas aos objetos à direita serão substituídos.

Neste exemplo, obj2.carsubstituiobj1.car

Apenas se alguém estiver usando a Google Closure Library :

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

Função auxiliar semelhante existe para a matriz :

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'

Estendi o método de David Coallier:

• Adicionada a possibilidade de mesclar vários objetos
• Suporta objetos profundos
• substituir parâmetro (que é detectado se o último parâmetro for um booleano)

Se a substituição for falsa, nenhuma propriedade será substituída, mas novas propriedades serão adicionadas.

Uso: obj.merge (mescla ... [, substitui]);

Aqui está o meu código:

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

Exemplos e casos de teste:

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

Meu método equals pode ser encontrado aqui: Comparação de objetos em JavaScript

No MooTools , há Object.merge () :

Object.merge(obj1, obj2);

No Ext JS 4, isso pode ser feito da seguinte maneira:

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

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

Veja mesclagem (objeto): Objeto .

Uau .. este é o primeiro post StackOverflow que eu já vi com várias páginas. Desculpas por adicionar outra "resposta"

Este método é para o ES5 e versões anteriores - existem muitas outras respostas para o ES6.

Não vi nenhum objeto "profundo" mesclado utilizando a argumentspropriedade Aqui está a minha resposta - compacta e recursiva , permitindo que argumentos de objetos ilimitados sejam passados:

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

A parte comentada é opcional. Ela simplesmente ignorará os argumentos passados ​​que não são objetos (evitando erros).

Exemplo:

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

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

Esta resposta é agora apenas uma gota no oceano ...

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

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

Usando jQuery.extend () - Link

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

Usando _.merge () - Link

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

Usando _.extend () - Link

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

Usando Object.assign () ECMAScript 2015 (ES6) - Link

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

Saída de todos

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

Com base nas respostas de Markus e vsync , esta é uma versão expandida. A função aceita qualquer número de argumentos. Ele pode ser usado para definir propriedades nos nós DOM e fazer cópias profundas dos valores. No entanto, o primeiro argumento é dado por referência.

Para detectar um nó DOM, a função isDOMNode () é usada (consulte a pergunta sobre estouro de pilha JavaScript isDOM - Como você verifica se um objeto JavaScript é um objeto DOM? )

Foi testado no Opera 11, Firefox 6, Internet Explorer 8 e Google Chrome 16.

Código

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

Alguns exemplos

Definir innerHTML e estilo de um elemento HTML

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

Mesclar matrizes e objetos. Observe que undefined pode ser usado para preservar valores na matriz / objeto à esquerda.

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

Qualquer argumento que não seja um objeto JavaScript (incluindo nulo) será ignorado. Exceto pelo primeiro argumento, também os nós DOM são descartados. Cuidado, isto é, seqüências de caracteres, criadas como novas String (), são de fato objetos.

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

Se você deseja mesclar dois objetos em um novo (sem afetar nenhum dos dois), forneça {} como primeiro argumento

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

Editar (por ReaperSoon):

Para mesclar também matrizes

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

Você deve usar os padrões do lodash

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

Com o Underscore.js , para mesclar uma matriz de objetos, faça:

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

Isso resulta em:

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