Мені потрібно мати можливість об'єднати два (дуже прості) об’єкти JavaScript під час виконання. Наприклад, я хотів би:

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

obj1.merge(obj2);

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

Хтось має сценарій для цього чи знає побудований спосіб зробити це? Рекурсія мені не потрібна, і мені не потрібно об’єднувати функції, просто методи на плоских об'єктах.

Стандартний метод ECMAScript 2018

Ви б використовували об'єктний спред :

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

mergedтепер є союзом obj1і obj2. Властивості в obj2замінять ті, що в 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};

Ось також документація MDN для цього синтаксису. Якщо ви використовуєте babel, вам знадобиться плагін babel-plugin-transform-object-rest-rest-spread, щоб він працював.

Стандартний метод 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);

(див. посилання на MDN JavaScript )

Метод для ES5 та раніше

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

Зауважте, що це просто додасть усі атрибути, obj2до obj1яких може бути не те, що ви хочете, якщо ви все ще хочете використовувати немодифікований obj1.

Якщо ви використовуєте рамку, яка лає по всьому прототипу, тоді вам доведеться захоплюватись чеками hasOwnProperty, але цей код буде працювати в 99% випадків.

Приклад функції:

/**
 * 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 також має утиліту для цього: http://api.jquery.com/jQuery.extend/ .

Взяте з документації 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" }

Вищевказаний код буде вимкнути існуючий об'єкт з назвою settings.

Якщо ви хочете створити новий об'єкт, не змінюючи жодного аргументу, скористайтеся цим:

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 ECMAScript 2015 (ES6) вказує , Object.assignякий буде робити це.

Object.assign(obj1, obj2);

Поточна підтримка веб-переглядача стає все кращою , але якщо ви розробляєте для браузерів, які не мають підтримки, ви можете використовувати поліфункцію .

Я шукав код для об'єднання властивостей об'єкта і опинився тут. Однак оскільки не було коду для рекурсивного злиття, я написав його сам. (Можливо, розширення jQuery є рекурсивним BTW?) Так чи інакше, сподіваємось, хтось інший також знайде це корисним.

(Тепер код не використовується Object.prototype:)

Код

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

Приклад

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 як

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

Зауважимо, що underscore.js's extend-метод робить це в одноланковому:

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

Подібно до jQuery extension (), ви маєте таку ж функцію в 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);

Мені потрібно об’єднати об’єкти сьогодні, і це питання (і відповіді) мені дуже допомогло. Я спробував деякі відповіді, але жодна з них не відповідала моїм потребам, тому я поєднав деякі відповіді, щось додав сам і придумав нову функцію злиття. Ось:

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

Деякі приклади звичаїв:

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

Ви можете використовувати властивості розповсюдження об'єктів - як правило, третя стадія пропозиції ECMAScript.

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

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

Наведені рішення слід змінити, щоб перевірити source.hasOwnProperty(property)в for..inциклі перед призначенням - інакше ви закінчите копіювати властивості всього ланцюга прототипу, що рідко бажано ...

Об'єднайте властивості N об’єктів в одному рядку коду

Object.assignМетод є частиною 2015 (ES6) стандарту ECMAScript і робить саме те , що вам потрібно. ( IEне підтримується)

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

Метод Object.assign () використовується для копіювання значень усіх перелічених власних властивостей з одного або декількох вихідних об'єктів у цільовий об'єкт.

Детальніше ...

Polyfill для підтримки старих браузерів:

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

Наступні два - мабуть, хороша відправна точка. lodash також має функцію налаштування для тих особливих потреб!

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

До речі, все, що ви все робите, - це перезапис властивостей, а не злиття ...

Ось як дійсно об'єдналася область об’єктів JavaScript: Замінятимуться лише ключі в toоб'єкті, які не є самими об'єктами from. Все інше буде справді злито . Звичайно, ви можете змінити таку поведінку, щоб не перезаписати нічого, що існує, як-от тільки якщо to[n] is undefinedтощо ...:

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

Використання:

var merged = realMerge(obj1, obj2);

Ось мій удар, який

1. Підтримує глибоке злиття
2. Не мутує аргументи
3. Бере будь-яку кількість аргументів
4. Не поширюється на прототип об'єкта
5. Не залежить від іншої бібліотеки ( jQuery , MooTools , Underscore.js тощо)
6. Включає перевірку наявності hasOwnProperty

7. Короткий :)

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

Приклад:

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)

Це нова технологія, що є частиною стандарту ECMAScript 2015 (ES6). Специфікація цієї технології завершена, але перевірте таблицю сумісності для використання та стану реалізації в різних браузерах.

Метод Object.assign () використовується для копіювання значень усіх перелічених власних властивостей з одного або декількох вихідних об'єктів у цільовий об'єкт. Він поверне цільовий об’єкт.

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.

Для не надто складних об'єктів ви можете використовувати 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_/

Зауважте, що в цьому прикладі "} {" не повинно виникати в рядку!

Там є бібліотека називається deepmergeна GitHub : Це , здається, отримує деяку тягу. Це автономне обладнання, доступне як через менеджери пакетів npm, так і для керування пакетами.

Я б схильний використовувати або вдосконалювати це замість копіювання-вставлення коду з відповідей.

Найкращий спосіб зробити це - додати належне властивість, яке не перелічується, використовуючи Object.defineProperty.

Таким чином, ви все одно зможете переглядати властивості своїх об'єктів, не маючи новоствореного "розширення", яке ви отримали, якби створили властивість за допомогою Object.prototype.extend.

Сподіваємось, це допомагає:

Object.defineProperty (Object.prototype, "розширити", {
    перераховується: помилково,
    значення: функція (від) {
        var props = Object.getOwnPropertyNames (від);
        var dest = це;
        props.forEach (функція (ім'я) {
            if (ім'я в dest) {
                var призначення = Object.getOwnPropertyDescriptor (від, ім'я);
                Object.defineProperty (dest, ім'я, призначення);
            }
        });
        повернути це;
    }
});

Після того, як ви працюєте, ви можете:

var obj = {
    назва: 'stack',
    закінчення: 'переповнення'
}
var заміна = {
    назва: 'запас'
};

obj.extend (заміна);

Я щойно написав про це в блозі тут: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

Ви можете просто використовувати jQuery extend

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

jQuery.extend(obj1, obj2);

Тепер obj1містить усі значення obj1іobj2

Прототип має таке:

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

obj1.extend(obj2) зробить те, що ти хочеш.

** Об'єднання об'єктів просте за допомогою оператора Object.assignрозповсюдження ...**

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

Об'єкти об'єднані справа наліво, це означає, що об'єкти, які мають однакові властивості, як і об'єкти праворуч, будуть переохоплені.

У цьому прикладі obj2.carвідміняєтьсяobj1.car

Просто якщо хтось використовує бібліотеку закриття 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};

Аналогічна допоміжна функція існує для масиву :

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'

Я продовжив метод Девіда Коллієра:

• Додана можливість об'єднання декількох об'єктів
• Підтримує глибокі предмети
• параметр переопределення (виявляється, якщо останній параметр є булевим)

Якщо переопределення помилкове, жодне властивість не буде перекрито, але нові властивості будуть додані.

Використання: obj.merge (зливається ... [, переосмислити]);

Ось мій код:

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

Приклади та тестові справи:

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

Мій метод рівних можна знайти тут: Порівняння об’єктів у JavaScript

У MooTools є Object.merge () :

Object.merge(obj1, obj2);

У Ext JS 4 це можна зробити наступним чином:

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

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

Див. Злиття (об’єкт): Об'єкт .

Нічого ... це перша публікація StackOverflow, яку я бачив на кількох сторінках. Вибачення за додавання ще однієї "відповіді"

Цей метод призначений для ES5 та раніше - існує багато інших відповідей на ES6.

Я не бачив жодного "глибокого" об'єднання, що об'єднує argumentsмайно. Ось моя відповідь - компактний та рекурсивний , що дозволяє передавати необмежені аргументи об'єкта:

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

Частина, що коментується, не є обов'язковою. Вона просто пропустить передані аргументи, які не є об'єктами (запобігаючи помилкам).

Приклад:

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

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

Ця відповідь - це лише крапля в океані ...

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

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

Використання jQuery.extend () - посилання

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

Використання _.merge () - посилання

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

Використання _.extend () - Посилання

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

Використання Object.assign () ECMAScript 2015 (ES6) - Посилання

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

Результат усіх

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

На основі відповіді Маркуса " і vsync" це розширена версія. Функція приймає будь-яку кількість аргументів. Він може використовуватися для встановлення властивостей на вузлах DOM і робить глибокі копії значень. Однак перший аргумент наводиться шляхом посилання.

Для виявлення вузла DOM використовується функція isDOMNode () (див. Запитання про переповнення стека JavaScript isDOM - як перевірити, чи об’єкт JavaScript є об'єктом DOM? )

Він був протестований в Opera 11, Firefox 6, Internet Explorer 8 та Google Chrome 16.

Код

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

Деякі приклади

Встановіть InternalHTML та стиль HTML-елемента

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

Об'єднати масиви та об'єкти. Зауважте, що невизначені можуть використовуватися для збереження значень у лівому масиві / об'єкті.

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 (включаючи null), буде ігнорований. За винятком першого аргументу, також відкидаються також вузли DOM. Остерігайтеся, тобто струни, створені як новий String (), насправді є об'єктами.

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

Якщо ви хочете об'єднати два об'єкти в новий (не впливаючи ні на один), поставте {} як перший аргумент

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

Редагувати (від ReaperSoon):

Також об'єднати масиви

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

Слід використовувати типові значення lodashDeep

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

З Underscore.js для об’єднання масиву об’єктів виконайте:

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

Це призводить до:

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