使用对象数组更新对象数组

Question

如果之前已经解决了这个问题，我很抱歉，但我无法让它与我发现的任何东西一起工作。

假设我有两个数组-- arr1，arr2。如果属性id在arr1和arr2中匹配，我希望更新arr1中的对象。存在于arr2中但不存在于arr1中的对象-意味着属性id在arr1中不存在-应该被推送到arr1。

示例：

let arr1 = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
]

let arr2 = [
  {id: 0, name: "Mark"},
  {id: 4, name: "Sara"}
] 

# Expected Outcome

let outcome = [
  {id: 0, name: "Mark"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"},
  {id: 4, name: "Sara"}
] 

Answer 1

您可以使用reduce和find来执行以下操作：

​

const arr1 = [
  {id: 0, name: "John"},
  {id: 1, name: "Sara"},
  {id: 2, name: "Domnic"},
  {id: 3, name: "Bravo"}
];

const arr2 = [
  {id: 0, name: "Mark"},
  {id: 4, name: "Sara"}
];

arr2.reduce((res, item) => {
  const existingItem = res.find(x => x.id === item.id);
  if (existingItem) { existingItem.name = item.name; }
  else { res.push(item); }
  return res;
}, arr1);

console.log(arr1);

​

Answer 2

你可以这样做：

​

 let arr1 = [
      {id: 0, name: "John"},
      {id: 1, name: "Sara"},
      {id: 2, name: "Domnic"},
      {id: 3, name: "Bravo"}
    ]

    let arr2 = [
      {id: 0, name: "Mark"},
      {id: 4, name: "Sara"}
    ] 
    
    var res = arr1.reduce((acc, elem)=>{
       var x = arr2.find(i=>i.id === elem.id);
       
       if(x){
          acc.push(x)
       }else{
         acc.push(elem)
       }
       return acc
    }, []);
    
    console.log(res)

​

Answer 3

假设您想要更改arr1中的对象，而不是创建新的对象，一种方法是使用for...of迭代arr2中的对象，然后使用Array.prototype.find()检查arr1中是否已经存在具有相同id的对象

如果有的话，你可以用Object.assign.

• Otherwise，来改变它，将新的对象推送到arr1

上。

​

const arr1 = [
  { id: 0, name: 'John' },
  { id: 1, name: 'Sara' },
  { id: 2, name: 'Domnic' },
  { id: 3, name: 'Bravo' },
];

const arr2 = [
  { id: 0, name: 'Mark', sometingElse: 123 },
  { id: 2, foo: 'bar' },
  { id: 4, name: 'Sara' },
];

for (const currentElement of arr2) {
  let previousElement = arr1.find(el => el.id === currentElement.id);
  
  if (previousElement) {
    Object.assign(previousElement, currentElement);
  } else {
    arr1.push(currentElement);
  }
}

console.log(arr1);

.as-console-wrapper {
  max-height: 100% !important;
}

​