为何push方法会修改所有对象元素？如何添加新元素不影响旧项？

问题根源 #

你遇到的问题是因为所有插入的元素都是同一个对象引用。组件中的this.request是引用类型，每次调用insert时，只是把这个引用重复添加到数组里。后续修改this.request的属性时，数组内所有元素（本质都是指向同一块内存的引用）都会同步变化。

解决方案 #

核心思路：每次插入时，推入数组的必须是新的对象实例，而非原对象的引用。以下是几种可行方式：

1. 浅拷贝创建新对象（适用于无嵌套结构的Request）

可以在组件调用insert时，用对象展开语法生成原对象的浅拷贝：

this._requestService.insert({...this.request});

或者在服务的insert方法内统一处理：

// request.service.ts
export class RequestService {
  public pendingRequests: Request[];

  constructor() {
    this.pendingRequests = [];
  }

  public insert(request: Request): void {
    // 生成浅拷贝对象后插入
    const newRequest = {...request};
    this.pendingRequests.push(newRequest);
  }
}

2. 用构造函数创建新的Request实例（适用于Request是类的情况）

如果Request是自定义类，直接通过构造函数生成新实例：

// 假设Request类定义
export class Request {
  constructor(public id: number, public content: string) {}
}

// 组件中调用
this._requestService.insert(new Request(this.request.id, this.request.content));

3. 深拷贝处理嵌套对象（适用于Request包含嵌套结构的情况）

如果Request内部有嵌套的对象或数组，浅拷贝无法隔离引用，需要用深拷贝。可以用JSON.parse(JSON.stringify())实现（注意：此方法无法处理函数、Symbol、循环引用）：

// 服务中实现深拷贝插入
public insert(request: Request): void {
  const deepCopiedRequest = JSON.parse(JSON.stringify(request));
  this.pendingRequests.push(deepCopiedRequest);
}

如果需要处理复杂类型，可以自行实现深拷贝函数。

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