在JavaScript中使用合并数组进行深度合并

Question

我想在reducer中深度合并具有类似属性的2个javascript对象。 要注意的是，这两个对象具有数组作为其属性，我需要将它们串联起来而不是替换。 基本上是这样的：

var x = {
  name: 'abc',
  family: {
    children: [
      {name: 'xxx'},
      {name: 'zzz'}
    ]
  }
};

var y = {
  name: 'abc',
  family: {
    children: [
      {name: 'yyy'}
    ]
  }
};

将导致

var y = {
  name: 'abc',
    family: {
      children: [
        {name: 'xxx'}, {name: 'zzz'}, {name: 'yyy'}
      ]
    }
  };

有什么建议吗？ 如果可能，我更喜欢基于lodash的解决方案。 另外，由于它在reducer中，所以我不能只用新对象替换该属性

Answer 1

对象具有数组作为其属性，我需要将它们连接起来而不是替换掉

对于您的简单示例，使用Array.prototype.concat()函数就足够了：

 var x = {name: 'abc', family:{children:[{name: 'xxx'}, {name: 'zzz'} ] }}, y = {name: 'abc', family: {children: [{name: 'yyy'}]}}; y.family.children = y.family.children.concat(x.family.children); console.log(y); 

Answer 2

如果您已经在使用lodash，请检查mergeWith是否没有执行您想要的操作（例如，请参见此答案 ）。

无论如何，这里是一个快速功能，可以执行您想要的操作。 请注意，它在检查方面做的很少，只会合并第一个对象中的属性（因为您说过的对象是相似的）。

此外，它不会突变对象，而是创建一个新对象。

 function merge(a, b){ var ret = {}; for(prop in a){ //assume b doesn't have properties that a hasn't //only merge on similar types, else keep a var propA = a[prop], propB = b[prop]; console.log(prop, typeof propA) if( (typeof propA == typeof propB) && (typeof propA == "object")){ if(Array.isArray(propA)){ ret[prop] = propA.concat(propB); }else{ ret[prop] = merge(propA, propB); } }else{ ret[prop] = propA; } } return ret; } var x = { name: 'abc', family: { children: [ {name: 'xxx'}, {name: 'zzz'} ] } }; var y = { name: 'abc', family: { children: [ {name: 'yyy'} ] } }; console.log(merge(x, y)); console.log(merge(y, x)); 

Answer 3

我假设您的对象之一是您要在减速器中更改的状态。

关于什么：

return Object.assign({}, x, {
   family: [...x.family, ...y.family]
  })

首先，这将创建一个新的空对象，并为其分配x（您的旧状态）。 之后，它在新对象中分配被覆盖的族。 ...表示数组中的所有元素，因此可以用来连接数组。