Tôi cần có khả năng hợp nhất hai đối tượng JavaScript (rất đơn giản) khi chạy. Ví dụ tôi muốn:

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

obj1.merge(obj2);

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

Có ai có một kịch bản cho điều này hoặc biết một cách xây dựng để làm điều này? Tôi không cần đệ quy và tôi không cần hợp nhất các hàm, chỉ cần các phương thức trên các đối tượng phẳng.

Phương pháp tiêu chuẩn ECMAScript 2018

Bạn sẽ sử dụng đối tượng lây lan :

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

mergedbây giờ là liên minh của obj1và obj2. Thuộc tính trong obj2sẽ ghi đè lên những người trong 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};

Đây cũng là tài liệu MDN cho cú pháp này. Nếu bạn đang sử dụng babel, bạn sẽ cần plugin babel-plugin-Transform-object-rest-lây lan để nó hoạt động.

Phương pháp tiêu chuẩn 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);

(xem Tài liệu tham khảo JavaScript MDN )

Phương pháp cho ES5 và trước đó

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

Lưu ý rằng điều này sẽ chỉ cần thêm tất cả các thuộc tính của obj2để obj1mà có thể không được những gì bạn muốn nếu bạn vẫn muốn sử dụng chưa sửa đổi obj1.

Nếu bạn đang sử dụng một khung công tác phù hợp với tất cả các nguyên mẫu của mình thì bạn phải có được fancier với các kiểm tra như thế hasOwnProperty, nhưng mã đó sẽ hoạt động cho 99% trường hợp.

Hàm ví dụ:

/**
 * 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 cũng có một tiện ích cho việc này: http://api.jquery.com/jQuery.extend/ .

Lấy từ tài liệu 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ạn mã trên sẽ biến đổi đối tượng hiện có tên settings.

Nếu bạn muốn tạo một đối tượng mới mà không sửa đổi một trong hai đối số, hãy sử dụng:

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.

Các Harmony ECMAScript 2015 (ES6) quy định cụ thể Object.assignmà sẽ làm điều này.

Object.assign(obj1, obj2);

Hỗ trợ trình duyệt hiện tại đang trở nên tốt hơn , nhưng nếu bạn đang phát triển cho các trình duyệt không có hỗ trợ, bạn có thể sử dụng một polyfill .

Tôi googled cho mã để hợp nhất các thuộc tính đối tượng và kết thúc ở đây. Tuy nhiên vì không có bất kỳ mã nào để hợp nhất đệ quy nên tôi đã tự viết nó. (Có lẽ jQuery mở rộng là đệ quy BTW?) Dù sao đi nữa, hy vọng người khác cũng sẽ thấy nó hữu ích.

(Bây giờ mã không sử dụng Object.prototype:)

Mã

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

Một ví dụ

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

Tạo đối tượng o3 như

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

Lưu ý rằng underscore.js's extend-method thực hiện điều này trong một lớp lót:

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

Tương tự như jQuery extend (), bạn có cùng chức năng trong 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);

Tôi cần hợp nhất các đối tượng ngày hôm nay, và câu hỏi này (và câu trả lời) đã giúp tôi rất nhiều. Tôi đã thử một số câu trả lời, nhưng không có câu trả lời nào phù hợp với nhu cầu của tôi, vì vậy tôi đã kết hợp một số câu trả lời, tự mình thêm một số thứ và đưa ra một chức năng hợp nhất mới. Đây là:

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

Một số ví dụ sử dụng:

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

Bạn có thể sử dụng các thuộc tính trải rộng đối tượng Hiện tại một đề xuất ECMAScript giai đoạn 3.

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

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

Các giải pháp đã cho nên được sửa đổi để kiểm tra source.hasOwnProperty(property)các for..invòng lặp trước khi gán - nếu không, cuối cùng bạn sẽ sao chép các thuộc tính của toàn bộ chuỗi nguyên mẫu, điều hiếm khi được mong muốn ...

Hợp nhất các thuộc tính của N đối tượng trong một dòng mã

Một Object.assignphương thức là một phần của tiêu chuẩn ECMAScript 2015 (ES6) và thực hiện chính xác những gì bạn cần. ( IEkhông được hỗ trợ)

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

Phương thức Object.assign () được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng có thể đếm được từ một hoặc nhiều đối tượng nguồn vào một đối tượng đích.

Đọc thêm...

Các polyfill để hỗ trợ trình duyệt cũ hơn:

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

Hai sau đây có lẽ là một điểm khởi đầu tốt. lodash cũng có chức năng tùy biến cho những nhu cầu đặc biệt đó!

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

Nhân tiện, tất cả những gì bạn đang làm là ghi đè các thuộc tính, không hợp nhất ...

Đây là cách khu vực đối tượng JavaScript thực sự được hợp nhất: Chỉ các khóa trong tođối tượng không phải là đối tượng sẽ bị ghi đè from. Mọi thứ khác sẽ được thực sự hợp nhất . Tất nhiên, bạn có thể thay đổi hành vi này để không ghi đè lên bất cứ thứ gì tồn tại như thế chỉ khi to[n] is undefined, v.v ...

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

Sử dụng:

var merged = realMerge(obj1, obj2);

Đây là vết đâm của tôi

1. Hỗ trợ hợp nhất sâu
2. Không làm thay đổi đối số
3. Có bất kỳ số lượng đối số
4. Không mở rộng nguyên mẫu đối tượng
5. Không phụ thuộc vào thư viện khác ( jQuery , MooTools , Underscore.js , v.v.)
6. Bao gồm kiểm tra hasOwnProperty

7. Là ngắn :)

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

Thí dụ:

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

Bản thảo năm 2015 (ES6)

Đây là một công nghệ mới, một phần của tiêu chuẩn ECMAScript 2015 (ES6). Thông số kỹ thuật của công nghệ này đã được hoàn thiện, nhưng kiểm tra bảng tương thích để biết tình trạng sử dụng và triển khai trong các trình duyệt khác nhau.

Phương thức Object.assign () được sử dụng để sao chép các giá trị của tất cả các thuộc tính riêng có thể đếm được từ một hoặc nhiều đối tượng nguồn vào một đối tượng đích. Nó sẽ trả về đối tượng đích.

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.

Đối với các đối tượng không quá phức tạp, bạn có thể sử dụng 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_/

Xin lưu ý rằng trong ví dụ này "} {" không được xuất hiện trong một chuỗi!

Có một thư viện được gọi deepmergetrên GitHub : Điều đó dường như đang có một lực kéo. Đó là một độc lập, có sẵn thông qua cả người quản lý gói npm và bower.

Tôi sẽ có xu hướng sử dụng hoặc cải thiện điều này thay vì mã sao chép từ các câu trả lời.

Cách tốt nhất để bạn làm điều này là thêm một thuộc tính phù hợp không thể đếm được bằng Object.defineProperty.

Bằng cách này, bạn vẫn có thể lặp lại các thuộc tính đối tượng của mình mà không cần "mở rộng" mới được tạo nếu bạn tạo thuộc tính bằng Object.prototype.extend.

Hy vọng điều này sẽ giúp:

Object.defineProperty (Object.prototype, "extend", {
    vô số: sai,
    giá trị: hàm (từ) {
        var props = Object.getOwnPropertyNames (từ);
        var mệnh = này;
        props.forEach (hàm (tên) {
            if (name in Dest) {
                var Destination = Object.getOwnPropertyDescriptor (từ, tên);
                Object.defineProperty (mệnh, tên, đích);
            }
        });
        trả lại cái này;
    }
});

Một khi bạn đã làm việc đó, bạn có thể làm:

var obj = {
    tên: 'ngăn xếp',
    kết thúc: 'tràn'
}
thay thế var = {
    tên: 'chứng khoán'
};

obj.extend (thay thế);

Tôi vừa viết một bài đăng blog về nó ở đây: http://onemoredigit.com/post/1527191998/extending-objects-in-node-js

Bạn chỉ có thể sử dụng jQuery extend

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

jQuery.extend(obj1, obj2);

Bây giờ obj1chứa tất cả các giá trị của obj1vàobj2

Nguyên mẫu có điều này:

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

obj1.extend(obj2) sẽ làm những gì bạn muốn.

** Hợp nhất các đối tượng là đơn giản bằng cách sử dụng Object.assignhoặc ...toán tử lây lan **

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

Các đối tượng được hợp nhất từ ​​phải sang trái, điều này có nghĩa là các đối tượng có các thuộc tính giống hệt như các đối tượng bên phải của chúng sẽ bị ghi đè.

Trong ví dụ này obj2.carghi đèobj1.car

Chỉ cần bất cứ ai đang sử dụng Thư viện đóng cửa của 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};

Hàm trợ giúp tương tự tồn tại cho mảng :

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'

Tôi mở rộng phương pháp của David Coallier:

• Đã thêm khả năng hợp nhất nhiều đối tượng
• Hỗ trợ các đối tượng sâu
• tham số ghi đè (được phát hiện nếu tham số cuối cùng là boolean)

Nếu ghi đè là sai, không có thuộc tính nào bị ghi đè nhưng thuộc tính mới sẽ được thêm vào.

Cách sử dụng: obj.merge (hợp nhất ... [, ghi đè]);

Đây là mã của tôi:

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

Ví dụ và TestCase:

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

Phương thức bằng của tôi có thể được tìm thấy ở đây: So sánh đối tượng trong JavaScript

Trong MooTools , có Object.merge () :

Object.merge(obj1, obj2);

Trong Ext JS 4 có thể được thực hiện như sau:

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

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

Xem hợp nhất (đối tượng): Đối tượng .

Wow .. đây là bài đăng StackOverflow đầu tiên tôi thấy với nhiều trang. Xin lỗi vì đã thêm một "câu trả lời"

Phương pháp này dành cho ES5 & trước đó - có rất nhiều câu trả lời khác giải quyết ES6.

Tôi không thấy bất kỳ đối tượng "sâu" nào hợp nhất sử dụng argumentstài sản. Đây là câu trả lời của tôi - nhỏ gọn & đệ quy , cho phép các đối số không giới hạn được truyền qua:

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

Phần được nhận xét là tùy chọn .. nó sẽ chỉ bỏ qua các đối số được truyền không phải là đối tượng (ngăn ngừa lỗi).

Thí dụ:

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

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

Câu trả lời này bây giờ nhưng là một giọt nước trong đại dương ...

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

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

Sử dụng jQuery.extend () - Liên kết

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

Sử dụng _.merge () - Liên kết

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

Sử dụng _.extend () - Liên kết

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

Sử dụng Object.assign () ECMAScript 2015 (ES6) - Liên kết

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

Đầu ra của tất cả

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

Dựa trên câu trả lời của Markus và vsync ' , đây là phiên bản mở rộng. Hàm lấy bất kỳ số lượng đối số. Nó có thể được sử dụng để đặt các thuộc tính trên các nút DOM và tạo các bản sao sâu của các giá trị. Tuy nhiên, đối số đầu tiên được đưa ra bằng cách tham khảo.

Để phát hiện nút DOM, hàm isDOMNode () được sử dụng (xem Câu hỏi chồng chéo JavaScript isDOM - Làm thế nào để bạn kiểm tra xem Đối tượng JavaScript có phải là Đối tượng DOM không? )

Nó đã được thử nghiệm trong Opera 11, Firefox 6, Internet Explorer 8 và Google Chrome 16.

Mã

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

Vài ví dụ

Đặt bên trongHTML và kiểu của Phần tử HTML

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

Hợp nhất mảng và đối tượng. Lưu ý rằng không xác định có thể được sử dụng để bảo toàn các giá trị trong mảng / đối tượng bên trái.

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

Bất kỳ đối số nào không tạo ra một đối tượng JavaScript (bao gồm null) sẽ bị bỏ qua. Ngoại trừ đối số đầu tiên, các nút DOM cũng bị loại bỏ. Coi chừng đó là các chuỗi, được tạo như String mới () trong thực tế là các đối tượng.

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

Nếu bạn muốn hợp nhất hai đối tượng thành một đối tượng mới (mà không ảnh hưởng đến bất kỳ đối tượng nào trong hai), hãy cung cấp {} làm đối số đầu tiê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

Chỉnh sửa (bởi ReaperSoon):

Để hợp nhất mảng

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

Bạn nên sử dụng mặc định của lodashDeep

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

Với Underscore.js , để hợp nhất một mảng các đối tượng làm:

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

Nó dẫn đến:

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