JavaScript删除对象属性时如何保留原对象数据不被修改

问题根源 #

JavaScript 中的对象属于引用类型，执行 const newPerson = person 时，只是把 person 指向堆内存的对象地址赋值给了 newPerson，两个变量实际指向同一个对象实例，因此修改任意一个变量的属性，都会同步影响另一个变量对应的对象。

解决方案 #

根据对象结构不同，可选两种处理方案：

单层对象（无嵌套对象/数组） #

使用浅拷贝创建全新的第一层对象即可，两种常用写法：

• 展开运算符写法（语法更简洁）

const person = {
  name: 'john',
  age: 50
}
// 浅拷贝生成独立的新对象
const newPerson = {...person}
delete newPerson.name

console.log(person) // { name: 'john', age: 50 } 原对象不受影响
console.log(newPerson) // { age: 50 }

• Object.assign 写法

const newPerson = Object.assign({}, person)

多层嵌套对象 #

浅拷贝仅能处理第一层属性，嵌套的对象/数组仍然是共享引用，此时需要使用深拷贝生成完全独立的新对象：

1. 原生 structuredClone API（推荐，支持 Date、Map、Set、循环引用等常见类型）

const person = {
  name: 'john',
  age: 50,
  address: {
    city: 'shanghai',
    code: 200000
  }
}
// 深拷贝生成完全独立的新对象
const newPerson = structuredClone(person)
delete newPerson.name
delete newPerson.address.city

console.log(person.name) // 'john'
console.log(person.address.city) // 'shanghai' 原对象嵌套属性不受影响

2. JSON.parse(JSON.stringify()) 兼容写法（仅适合简单场景，无法处理函数、Symbol、undefined、循环引用）

const newPerson = JSON.parse(JSON.stringify(person))

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