有没有办法“合并”一个数组中的两个对象？答案

【问题标题】：Is there a way to "merge" two object that are inside an array?有没有办法“合并”一个数组中的两个对象？
【发布时间】：2020-03-06 11:54:27
【问题描述】：

我有两个数组，我想要两个合并，像这样：

const arr1 = [{
    id: 1,
    isAvailable: true
  },
  {
    id: 2,
    isAvailable: true
  },
  {
    id: 4,
    isAvailable: true
  },
  {
    id: 6,
    isAvailable: false
  }
]

const arr2 = [{
    id: 1,
    isAvailable: false
  },
  {
    id: 2,
    isAvailable: false
  },
  {
    id: 6,
    isAvailable: false
  }
]

我正在寻找的结果是这样的：

const arr3 = [{
    id: 1,
    isAvailable: false
  },
  {
    id: 2,
    isAvailable: false
  },
  {
    id: 4,
    isAvailable: true
  },
  {
    id: 6,
    isAvailable: false
  }
]

我需要用第二个数组的值更新第一个数组的值，这样我就可以拥有一个新数组，其中包含真正可用的和不可用的。

【问题讨论】：

arr2 可以包含arr1 中不存在的项目吗？
@ibrahimmahrir 不，arr2 中的项目将始终在 arr1 中

标签： javascript arrays reactjs object

【解决方案1】：

您可以根据arr2 过滤arr1，然后将过滤后的arr2 与arr1 合并

const arr1 = [{
  id: 1,  isAvailable: true
},
{
  id: 2,  isAvailable: true
},
{
  id: 4,  isAvailable: true
},
{
  id: 6,  isAvailable: false
}
];

const arr2 = [{
  id: 1,  isAvailable: false
},
{
  id: 2,  isAvailable: false
},
{
  id: 6,  isAvailable: false
}
];

const result = arr1.filter(a => !arr2.some(s => s.id == a.id)).concat(arr2);
console.log(result);

或者使用map、some和find方法：

const arr1 = [{
  id: 1, isAvailable: true
},
{
  id: 2, isAvailable: true
},
{
  id: 4, isAvailable: true
},
{
  id: 6,
  isAvailable: false
}
];

const arr2 = [{
  id: 1, isAvailable: false
},
{
  id: 2, isAvailable: false
},
{
  id: 6, isAvailable: false
}
];
const result = arr1.map(a=> arr2.some(f=> f.id == a.id) ? 
                            arr2.find(f=> f.id == a.id) : a 
                        );
console.log(result);

【讨论】：

这正是我所需要的。非常感谢！
@ItsMeAndrea 很高兴为您提供帮助！:)

【解决方案2】：

根据您的示例，这是我的示例程序。希望它能解决你的问题

const arr1 = [{
    id: 1,
    isAvailable: true
  },
  {
    id: 2,
    isAvailable: true
  },
  {
    id: 4,
    isAvailable: true
  },
  {
    id: 6,
    isAvailable: true
  }
]

const arr2 = [{
    id: 1,
    isAvailable: false
  },
  {
    id: 2,
    isAvailable: false
  },
  {
    id: 6,
    isAvailable: false
  }
]
const arr3 = []
for (let i = 0; i < arr1.length; i++) {
  let found = arr2.find(item => item.id === arr1[i].id)
  if (found)
    arr3.push(found)
  else
    arr3.push(arr1[i])
}
console.log(arr3)

输出为
[ { id: 1, isAvailable: false }, { id: 2, isAvailable: false }, { id: 4, isAvailable: true }, { id: 6, isAvailable: false } ]

【讨论】：

【解决方案3】：

您可以使用 Array.map() 执行此操作，方法是覆盖第二个数组中存在的值。

const newArray = arr1.map(({ id, isAvailable}) => {
  const matchingObjects = arr2.filter(({ id: id2 }) => id === id2);
  return matchingObjects.length > 0
    ? { id, isAvailable: matchingObjects[0].isAvailable } // replace the original value
    : { id, isAvailable } // do not overwrite this value
})

【讨论】：

【解决方案4】：

您可以首先将arr2 转换为将ID 映射到其可用性的映射对象，例如{ "1": true, "4": false, ... }。然后将arr1 对象映射到一个新的对象数组中，同时使用映射对象更新isAvailable 属性：

let map = arr2.reduce((acc, o) => (acc[o.id] = o.isAvailable, acc), {});

let arr3 = arr1.map(o => ({
  id: o.id,
  isAvailable: map.hasOwnProperty(o.id) ? map[o.id] : o.isAvailable
}));

每个新对象都将具有与原始对象相同的 id。它的isAvailable 属性要么是地图对象的值，要么是它的原始值，这取决于它在地图对象中是否有条目（在arr2 中是否有对象）

【讨论】：