为何.push()会替换JSON数组最后一个对象？Angular4 CRUD问题咨询

这种情况我碰到过好多次，大概率是你在添加操作时复用了同一个对象的引用，而不是每次创建新的Employee实例。数组里存储的是对象的引用，如果你一直用同一个对象，后续修改它的属性时，数组里已经存在的那个对象也会跟着变，看起来就像是新添加的对象替换了最后一项。下面给你一步步分析解决：

先排查最常见的错误场景 #

你可能在组件里是这么写的：

// 错误示例：复用同一个对象实例
addedEmployee: Employee = { id: 0, name: '', review: [], peers: [] };

onSubmit() {
  this.employeeService.addEmployee(this.addedEmployee).subscribe(() => {
    this.employees.push(this.addedEmployee);
    // 只是重置属性，没有创建新对象
    this.addedEmployee.name = '';
    this.addedEmployee.review = [];
    this.addedEmployee.peers = [];
  });
}

这里push的是addedEmployee的引用，之后你修改它的属性，数组里已经存的那个对象也会被修改，导致视觉上看起来新对象替换了最后一个。

正确的解决方式：每次提交创建新的Employee实例 #

你需要在提交时复制当前表单对象的属性到新实例，或者直接创建全新的对象，确保数组里的每个元素都是独立的引用：

// 正确示例：创建新对象避免引用复用
addedEmployee: Employee = { id: 0, name: '', review: [], peers: [] };

onSubmit() {
  // 用扩展运算符浅拷贝对象，注意嵌套数组也要单独复制
  const newEmployee: Employee = {
    ...this.addedEmployee,
    review: [...this.addedEmployee.review],
    peers: [...this.addedEmployee.peers]
  };

  this.employeeService.addEmployee(newEmployee).subscribe(() => {
    this.employees.push(newEmployee);
    // 重置表单绑定的对象为全新的空实例
    this.addedEmployee = { id: 0, name: '', review: [], peers: [] };
  });
}

这里的扩展运算符...会帮你复制对象的顶层属性，对于review和peers这种数组，也要用...来创建新数组，避免嵌套引用的问题。

更可靠的方式：使用后端返回的创建对象 #

如果你的Node.js后端API在创建员工后会返回完整的Employee对象（包含正确的id等属性），那最好用后端返回的对象来push，这样能保证数据的准确性，也彻底避免前端引用问题：

onSubmit() {
  const newEmployee: Employee = {
    ...this.addedEmployee,
    review: [...this.addedEmployee.review],
    peers: [...this.addedEmployee.peers]
  };

  this.employeeService.addEmployee(newEmployee).subscribe((createdEmployee) => {
    // 用后端返回的已持久化对象添加到数组
    this.employees.push(createdEmployee);
    this.addedEmployee = { id: 0, name: '', review: [], peers: [] };
  });
}

额外检查：确保员工数组是独立副本 #

另外还要确认你的employees数组是不是组件自己的独立副本，比如如果是从服务里直接获取的数组引用，服务里的修改会同步影响组件数组。可以在获取列表时创建副本：

this.employeeService.getEmployees().subscribe((apiEmployees) => {
  // 创建数组副本，避免和服务里的数组共用引用
  this.employees = [...apiEmployees];
});

按照上面的方法调整后，应该就能解决push时替换最后一项的问题了，核心就是保证每个添加到数组的对象都是独立的实例，不是同一个引用。

内容的提问来源于stack exchange，提问作者Rajendra Sahu