TypeScript/JavaScript删除数组对象属性时原数组被修改问题排查

这其实是JavaScript引用类型的机制问题，不是语法错误，咱们一步一步拆解清楚：

首先看你代码的第一步：

let exportData = this.firstList;

这行代码没有真正克隆数组，它只是把原数组firstList的内存引用赋值给了exportData。你可以理解成两个变量共享同一个“数据盒子”——不管通过哪个变量修改盒子里的内容，另一个变量都会同步看到变化，数组里的每个对象也是同样的引用逻辑。

接下来你用filter遍历数组并删除job属性：

exportData = exportData.filter(function (props) { 
  delete props.job; 
  return true; 
});

这里的props其实就是原数组firstList里的对象本身，你删除props.job本质上是在修改原数组里的对象，所以原数组的对应属性自然也会消失。另外多说一句，filter的设计目的是筛选数组元素（返回true保留，false剔除），用来遍历修改元素有点“误用”，用map会更贴合场景。

正确的做法：切断引用，克隆数组内的对象 #

要避免影响原数组，你需要同时克隆数组和数组里的每个对象，彻底切断引用关系。这里有两种常用的实现方式：

方式1：使用对象展开运算符（ES6+）

let exportData = this.firstList.map(item => {
  // 展开原对象的所有属性，排除job，返回全新的对象
  const { job, ...rest } = item;
  return rest;
});

方式2：使用Object.assign

let exportData = this.firstList.map(item => {
  // 创建原对象的副本
  const newItem = Object.assign({}, item);
  // 在副本上删除job属性
  delete newItem.job;
  return newItem;
});

这两种方式都会生成一个全新的数组，数组里的每个对象也是原对象的独立副本，修改exportData里的内容就不会再影响到firstList了。

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