前端深拷贝和浅拷贝的原理及应用

最新推荐文章于 2025-09-12 20:33:33 发布

原创最新推荐文章于 2025-09-12 20:33:33 发布 · 置顶 · 840 阅读

3 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了JavaScript中数据类型的拷贝机制，包括基础数据类型和引用数据类型的区别，以及浅拷贝和深拷贝的概念。通过实例演示了浅拷贝如何导致变量间的数据共享，而深拷贝则能避免这一问题，确保数据独立。提供了多种实现深拷贝的方法，如Object.assign、ES6扩展运算符和JSON.stringify与JSON.parse组合。

1.1 数据类型对拷贝的作用

1.11 数据类型：

（1）基础数据类型（primitive data types）：

基础数据类型:简单的数据端，基础类型的数据有Number,Null,Boolean,Number and String。这五种基础类型可以按值访问，可以直接操作保存在变量的实际值（文字来源：JavaScript高级程序设计）

在这里插入图片描述


 let test1 = "123";
   let test2 = test1;
   window.console.log("变化之前")
   window.console.log(`test1-${test1}`)
   window.console.log(`test2-${test2}`)
 
   test2 = "321";
   window.console.log("变化之后");
  window.console.log(`test2-${test2}`)
  window.console.log(`test1-${test1}`)

在这里插入图片描述

（2）引用数据类型（Composite data types）：

引用数据类型数据是指那些可能多个值构成的对象，有Array，Object等，引用类型值保存在堆内存中，JavaScript不允许直接访问内存中的位置，也不能直接操作对象的内存空间。操作对象时是直接操作对象的引用，而不是真正对象，所以会有深拷贝和浅拷贝的问题（文字来源：JavaScript高级程序设计）

在这里插入图片描述

2.1 浅拷贝

浅拷贝赋值的变量，会同时指向同一个栈内存地址下的值，会影响所以变量下的赋值
在这里插入图片描述


  //引用数据类型，只能拿到内存里面的引用
  let testObj1 = {
      name:"testObject"
  }
  let testObj2 = testObj1
  window.console.log("变化之前前");
  window.console.log("testObj1");
  window.console.log(testObj1)
  window.console.log("testObj2");
  window.console.log(testObj1)
  testObj2.name = "testObj2";
  window.console.log("变化之后");
  window.console.log("testObj1");
  window.console.log(testObj1)
  window.console.log("testObj2");
  window.console.log(testObj1)

在这里插入图片描述

3.1 深度拷贝

深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突
在这里插入图片描述

3.2 使用方法：

3.21 方案一:使用Object.assign(target, source)方法


 let  testDeepObj1 = {
    name:"testDeepObject"
}
let  testDeepObj2 =   Object.assign({},testDeepObj1);
window.console.log("变化前")
window.console.log("testDeepObj1");
window.console.log(testDeepObj1);
window.console.log("testDeepObj2");
window.console.log(testDeepObj2);
testDeepObj2.name = "111"
window.console.log("变化后");
window.console.log("testDeepObj1");
window.console.log(testDeepObj1);
window.console.log("testDeepObj2");
window.console.log(testDeepObj2);

在这里插入图片描述

3.22 方案二:使用ES6{…}


 let  testDeepObj1 = {
    name:"testDeepObject"
}
let  testDeepObj2 = {...testDeepObj1};
window.console.log("变化前")
window.console.log("testDeepObj1");
window.console.log(testDeepObj1);
window.console.log("testDeepObj2");
window.console.log(testDeepObj2);
testDeepObj2.name = "111"
window.console.log("变化后");
window.console.log("testDeepObj1");
window.console.log(testDeepObj1);
window.console.log("testDeepObj2");
window.console.log(testDeepObj2);

3.23 方案三：把赋值的值先利用JSON.stringfy()字符串化然后复制的时候在转为JSON.parse()


let  testDeepObj1 = JSON.stringify({
    name:"testDeepObject"
})
let  testDeepObj2 = JSON.parse(testDeepObj1);
window.console.log("变化前")
window.console.log("testDeepObj1");
window.console.log(testDeepObj1);
window.console.log("testDeepObj2");
window.console.log(testDeepObj2);
testDeepObj2.name = "111"
window.console.log("变化后");
window.console.log("testDeepObj1");
window.console.log(testDeepObj1);
window.console.log("testDeepObj2");
window.console.log(testDeepObj2);