Ag-grid中addRow操作意外修改原始rowData的问题求助

嘿，这个问题我太熟悉了！核心原因是JavaScript里数组是引用类型，你在addRow里写let rowData = this.rowData的时候，并没有创建新数组，只是把指向this.rowData的引用赋值给了局部变量rowData。所以你对rowData做的unshift操作，其实直接修改了原来的this.rowData数组——这就是为什么控制台打印this.rowData会变成7行的原因。

下面给你一步步的解决方案：

1. 先保存原始数据的深拷贝 #

首先在首次加载数据的时候，要把原始数据单独存一份深拷贝，这样后续不管怎么修改当前表格数据，原始备份都不会变：

// 原始数据加载逻辑修改
this._Service.httpPost(Request, Url).subscribe(data => { 
  responseJson = JSON.parse(JSON.stringify(data)); 
  this.rowData = responseJson; 
  // 新增：保存原始数据的深拷贝，用于reset恢复
  this.originalRowData = JSON.parse(JSON.stringify(responseJson));
  this.gridOptions.api.setRowData(this.rowData); // 初始显示6行
});

2. 修改addRow函数，操作数组的拷贝而非原引用 #

在添加行的时候，要先创建当前this.rowData的拷贝，再对拷贝进行修改，这样就不会影响原数组了：

addRow() { 
  // 方式1：浅拷贝（适用于行数据是简单值或不需要修改嵌套对象的场景）
  let rowData = [...this.rowData]; 
  // 方式2：深拷贝（如果行数据包含嵌套对象，推荐用这个）
  // let rowData = JSON.parse(JSON.stringify(this.rowData));

  rowData.unshift(newData); // 给拷贝后的数组添加新行
  this.gridOptions.api.setRowData(rowData); // 更新表格数据
  this.rowData = rowData; // 同步更新当前rowData为新的数组
}

3. 实现reset函数恢复原始数据 #

现在有了originalRowData这个原始备份，reset的时候直接用它来恢复就可以了：

reset() {
  // 同样用深拷贝，避免后续修改影响原始备份
  this.rowData = JSON.parse(JSON.stringify(this.originalRowData));
  this.gridOptions.api.setRowData(this.rowData);
}

补充说明 #

• 浅拷贝（[...arr]或arr.slice()）：只拷贝数组本身，数组里的对象还是引用原对象，如果你的行数据是简单对象且不会修改嵌套属性，用这个足够，性能也更好。
• 深拷贝（JSON.parse(JSON.stringify(arr))）：会把数组和里面的所有嵌套对象都拷贝成新的，适合复杂数据结构，但注意如果数据里有函数、Symbol等特殊类型，这个方法会丢失这些数据，这种情况可以考虑用lodash的cloneDeep方法（不过需要额外引入库）。

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