js深拷贝和浅拷贝的区别-JavaScript对象拷贝详解：浅拷贝 vs 深拷贝

JavaScript对象拷贝详解：浅拷贝 vs 深拷贝

在常规的开发过程中，我们频繁遭遇需要“复制对象”的情境。你是否有过这样的经历：尽管使用了扩展运算符（...）或是Object.assign方法来执行对象复制，但修改副本时却意外地影响了原始对象？这正是“浅拷贝”与“深拷贝”这一经典问题的体现！本文将通过具体的代码实例，系统地为您讲解相关的技术要点。

浅拷贝的原理及其具体操作方法究竟是怎样的呢？

浅拷贝能够复制对象的最外层属性。一旦遇到属性值本身也是一个对象（例如，嵌套对象），它仅会复制该对象的引用，并不会对内部的复杂结构进行递归复制。因此，副本与原对象在嵌套属性上仍然保持着对同一份数据的共享。

常用实现方式

最常用的浅拷贝方法有：

代码示例

const originalConfig = {
app: "sevalla-web",
region: "us-east-1",
resources: {
    cpu: "2vCPU",
    memory: "4GB",
  },
};

// 使用扩展运算符进行浅拷贝
constshallowCopy 对象通过复制原始配置对象的方式创建；其内容与原始配置对象保持一致。

// 修改嵌套对象
shallowCopy.resources.cpu = "4vCPU";

console.log(originalConfig.resources.cpu); // 输出："4vCPU"

技术解析适用场景二：探讨深拷贝的原理及其实现方式。那么，何为深拷贝呢？

深拷贝能够对对象的每一层属性进行递归复制，不论这些属性是基础数据类型还是引用数据类型。通过这种方式，复制的副本与原始对象之间将不存在任何共享的子对象，二者将实现完全的独立。

常用实现方式代码示例

const deepConfig = JSON.parse(JSON.stringify(originalConfig));

// 修改嵌套对象
deepConfig.resources.cpu = "8vCPU";

console.log(originalConfig.resources.cpu); // 输出："4vCPU"
console.log(deepConfig.resources.cpu); // 输出："8vCPU"