用另一个具有相同 id 的数组替换数组中的对象 JavaScript

当你需要用一个新的具有相同 id 的数组替换原数组中的对象时，可以使用以下 JavaScript 代码实现：

function replaceObjectWithSameId(oldArray, newArray) {
  return oldArray.map(oldObj => {
    const newObj = newArray.find(newObj => newObj.id === oldObj.id);
    return newObj ? newObj : oldObj;
  });
}

这个函数接受两个参数：原数组和新数组。函数使用 map 方法遍历原数组，对于每个对象，使用 find 方法在新数组中查找是否存在具有相同 id 的对象。如果查找成功，则返回新数组中的对象；否则返回原数组中的对象。

以下是一个使用示例：

const oldArray = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const newArray = [
  { id: 2, name: 'Barbara' },
  { id: 3, name: 'Charles' },
  { id: 4, name: 'David' }
];

const result = replaceObjectWithSameId(oldArray, newArray);

console.log(result);
// Output: [
//   { id: 1, name: 'Alice' },
//   { id: 2, name: 'Barbara' },
//   { id: 3, name: 'Charles' }
// ]

在这个示例中，原数组中的第一个对象 { id: 1, name: 'Alice' } 没有在新数组中找到具有相同 id 的对象，所以直接返回原对象。而原数组中的第二个对象 { id: 2, name: 'Bob' } 在新数组中找到了具有相同 id 的对象 { id: 2, name: 'Barbara' }，所以返回新对象。同样原数组中的第三个对象 { id: 3, name: 'Charlie' } 也在新数组中找到了具有相同 id 的对象 { id: 3, name: 'Charles' }，所以也返回新对象。而新数组中的 { id: 4, name: 'David' } 没有在原数组中找到具有相同 id 的对象，所以被忽略了。

这个函数可以很方便地应用于需要在前端界面中进行增删改查操作的场景中。例如，当用户提交了一个新的数据后，可以用这个函数更新原数组中的对象。