合并两个对象而不覆盖

Question

我有一个像这样的defaultObject:

var default = {
    abc: "123",
    def: "456",
    ghi: {
       jkl: "789",
       mno: "012"
    }
};

我有另一个喜欢:

var values = {
    abc: "zzz",
    ghi: {
       jkl: "yyy",
    }
};

如何将这两个对象与以下结果合并(无覆盖)？

var values = {
    abc: "zzz",
    def: "456",
    ghi: {
       jkl: "yyy",
       mno: "012"
    }
};

(我不想更改默认对象!)

Answer 1

现在,所有现代浏览器都支持ES2015,本机Object.assign可用于扩展对象

Object.assign({}, _default, values)

Object.assign

请注意,这default是一个保留关键字,不能用作变量名

原始答案,写于2013年:

由于这是用jQuery标记的,因此您可以将$ .extend用于简单的跨浏览器解决方案

var temp = {};
$.extend(true, temp, _default, values);
values = temp;

Answer 2

对于那些不使用jQuery的人来说,这里有一个vanilla-js解决方案.

方案:

function extend (target) {
    for(var i=1; i<arguments.length; ++i) {
        var from = arguments[i];
        if(typeof from !== 'object') continue;
        for(var j in from) {
            if(from.hasOwnProperty(j)) {
                target[j] = typeof from[j]==='object'
                ? extend({}, target[j], from[j])
                : from[j];
            }
        }
    }
    return target;
}

压缩(使用Closure编译器):

只有199个字符!

var extend=function e(c){for(var d=1;d<arguments.length;++d){var a=arguments[d];if("object"===typeof a)for(var b in a)a.hasOwnProperty(b)&&(c[b]="object"===typeof a[b]?e({},c[b],a[b]):a[b])}return c}

使用方法:

extend(target, obj1, obj2); // returns target

如果您只想合并,请使用

var merged = extend({}, obj1, obj2);

特点:

• 它没有看对象的原型.
• 忽略非对象.
• 它是递归的,以便合并作为对象的属性.
• 在target属性中引用的对象(如果扩展)将替换为新对象,并且不修改原始对象.
• 如果属性名称相同,则合并后的值将是最后一个(按参数顺序)非对象值之后的对象合并.或者,如果最后一个不是对象本身.

示例:

extend({}, {a:1}, {a:2});            // {a:2}
extend({}, {a:1}, {b:2});            // {a:1, b:2}
extend({}, {a: {b:1}}, {a: {b:2}});  // {a: {b:2}}
extend({}, {a: {b:1}}, {a: {c:2}});  // {a: {b:2, c:2}}
extend({}, {a: {a:1}}, {a: {b:2}}, {a: 'whatever non object'});
    // {a: "whatever non object"}
extend({}, {a: {a:1}}, {a: {b:2}}, {a: 'whatever non object'}, {a: {c:3}},{a: {d:4}});
    // {a: {c:3, d:4}}

警告:

请注意,如果浏览器不够聪明,它可能会陷入无限循环:

var obj1={},
    obj2={};
obj1.me=obj1;
obj2.me=obj2;
extend({},obj1,obj2);

如果浏览器足够聪明,它可能会抛出错误,或返回{me: undefined},或其他什么.

请注意,如果您使用jQuery,此警告也适用$.extend.

Answer 3

如果您对ES6感到满意:

Object.assign({}, default, values)