如何避免在 JavaScript 对象数组合并中覆盖

Question

我是反应原生的新手，如何合并两个java脚本对象数组。使用 object.assign() ，它可以工作，但它会覆盖相同的字段。

Array1 = {
  '2018-12-15': { marked:true, dotColor:'red' },
  '2018-12-16': { marked:true, dotColor:'red' },
  '2018-12-17': { marked:true, dotColor:'red' },
}
Array2 = {
  '2018-12-15': { marked:true, dotColor:'green' },
  '2018-12-26': { marked:true, dotColor:'green' },
  '2018-12-27': { marked:true, dotColor:'green' },
}

输出应为：

Result = {
  '2018-12-15': { marked:true, dotColor:'red' },
  '2018-12-16': { marked:true, dotColor:'red' },
  '2018-12-17': { marked:true, dotColor:'red' },
  '2018-12-15': { marked:true, dotColor:'green' },
  '2018-12-26': { marked:true, dotColor:'green' },
  '2018-12-27': { marked:true, dotColor:'green' },
 }

Answer 1

您尝试执行的操作是不可能的，因为对象不能具有重复的属性。考虑一下，如果你的对象有两个叫做2018-12-15的属性：

const result = {
  '2018-12-15': value,
  '2018-12-15': value2,
}

您如何同时访问它们？ result['2018-12-15']现在有一个完全不明确的值，正是由于这个原因，JavaScript对象不能有重复的键。

如果你想合并对象，你可以做一些简单的事情，比如这样：

const result = { ...Array2, ...Array1 }

哪些输出：

{
  '2018-12-15'. : { marked:true,dotColor:'red' },
  '2018-12-16'. : { marked:true,dotColor:'red' },
  '2018-12-17'. : { marked:true,dotColor:'red' },
  '2018-12-26'. : { marked:true,dotColor:'green' },
  '2018-12-27'. : { Bmarked:true,dotColor:'green' },
}

这称为对象传播，基本上我"解包"了两个初始对象并将它们包装在括号中以创建一个新对象。最终属性是根据最后放置的对象确定的，因此

const result = { ...Array1, ...Array2 }

将输出：

{
  '2018-12-15': {marked: true, dotColor: "green"},
  '2018-12-16': {marked: true, dotColor: "red"},
  '2018-12-17': {marked: true, dotColor: "red"},
  '2018-12-26': {marked: true, dotColor: "green"},
  '2018-12-27': {marked: true, dotColor: "green"}
}

如果您想更好地控制对象的合并方式，您可以使用内置的reduce方法