Question

我有两个这样的对象：

var a = {prop:{a:'1'}}
var b = {prop:{b:'1'}}

我想使用Object.assign合并两个对象。我尝试过：

var c = Object.assign(a,b)
> {prop:{b:'1'}}

如何获得此输出：

{prop:{a:'1',b:'1'}}

简而言之，我想在每个子对象上分配对象=>（如果存在属性，请首先检查儿童，如果不能，则不要覆盖）

Answer 1

您可以对对象的每个级别使用深度合并功能。

函数deepMerge可以作为给定目标的单个函数，也可以作为Array#reduce的回调，其中迭代对象数组，并提供一个空对象作为startvalue进行缩减。

该函数/回调本身具有两个参数，一个用于目标对象，一个用于源对象，在该对象中所有条目均被获取并进行迭代。

检查对象的值，如果类型是对象，则使用新的目标属性（如果未提供）或对退出属性进行递归调用deepMerge。

如果该值不是对象，则使用给定的键将该值分配给target。

结果是具有给定对象所有属性的新对象。

function deepMerge(target, source) {
    Object.entries(source).forEach(([key, value]) => {
        if (value && typeof value === 'object') {
            deepMerge(target[key] = target[key] || {}, value);
            return;
        }
        target[key] = value;
    });
    return target;
}

var a = { prop: { a: '1' } },
    b = { prop: { b: '1' } },
    c = [a, b].reduce(deepMerge, {});
    
console.log(c);

Answer 2

由于您的案例中的a和b包含一个具有相同名称的属性，因此当您执行类似Object.assign(a,b)的操作时，b的prop属性会覆盖并且不会合并prop。 Reference

尝试以下操作：

var a = {prop:{a:'1'}}
var b = {prop:{b:'1'}}

var c = {};
c.prop = Object.assign({},a.prop,b.prop);

console.log(c);

或

您可以编写自己的自定义函数，该函数可以合并具有相同属性的对象的值。

尝试以下操作：

function merge(source, target) {
    Object.keys(source).forEach((k) => {
        if (source[k].constructor.toString().indexOf('Object') > -1 && target[k]) {          
            merge(source[k], target[k]);
            return;
        }
        target[k] = source[k];
    });
    return target;
}

var a = {prop:{a: '1'}};
var b = {prop:{ b: '1'}};
var c = {};
[a,b].forEach((e)=>merge(e, c));
    
console.log(c);

Answer 3

如果对Object.assign的要求不高，则可以在es6中执行此操作：

 var c = {prop:{...a.prop, ...b.prop}}

请参见Spread syntax上的MDN

嵌套对象分配Javascript

3 个答案: