深拷贝、浅拷贝

深浅拷贝:

内存中一共分为栈内存和堆内存两大区域,所谓深浅拷贝主要是对js引用类型数据进行拷贝一份;浅拷贝就是引用类型数据赋值之后,例obj1=obj2 如果后面的操作中修改obj1对象obj2也会改变,因为在内存中引用数据类型,名字存在栈内存中,值存在堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,两个引用类型数据地址一样,如果其中一个发生变化另外一个会有影响;而深拷贝则不会,深拷贝是会在堆内存中重新开辟一块空间进行存放。

简单来说就是B复制了A,如果A发生了改变,如果B随之变化,那么是浅拷贝,如果B并没有发生变化,则是深拷贝。

1.如果是基本数据类型,名字和值都会储存在栈内存中

 let a = 1;
 let b = a; // 栈内存会开辟一个新的内存空间,此时b和a都是相互独立的
 b = 2;
 console.log(a); //输出a为1
 console.log(b);  //输出b为2
 
2.浅拷贝实现方式
(1)用=赋值
 let a = [1, 2, 3]
 let b = a;
 a[0] = 0;
 console.log('a', a);
 console.log('b', b);
运行结果
 
(2)用Object.assign方法
 let obj1 = {
            a: 1,
            b: 2
        }
 let obj2 = Object.assign(obj1);
 obj2.a = 3;
 console.log('obj1', obj1)
 console.log('obj2', obj2)
运行结果

 

3.深拷贝实现方式

(1)JSON做字符串转换

 let a = [1, 2, 3];
 let b = JSON.parse(JSON.stringify(a));
 b[0] = 0;
 console.log("a", a);
 console.log("b", b);
 运行结果
 

(2)手动实现深拷贝

 let obj1 = {
            a: 1,
            b: 2
        }
 let obj2 = {
            a: obj1.a,
            b: obj1.b
        }
  obj2.a = 3;
  console.log('obj1', obj1)
  console.log('obj2', obj2)
运行结果

 

 (3)用递归去拷贝所有层级属性

  const deepClone = (obj) => {
            let objClone = Array.isArray(obj) ? [] : {};
            if (obj && typeof obj === "object") {
                for (key in obj) {
                    //判断obj子元素是否为对象,如果是,递归复制
                    if (obj[key] && typeof obj[key] === "object") {
                        objClone[key] = deepClone(obj[key]);
                    } else {
                        //如果不是,简单复制
                        objClone[key] = obj[key];
                    }
                }
            }
            return objClone;
        }
 
  let a = [1, 2, 3];
  let b = deepClone(a);
  b[0] = 0;
  console.log("a", a);
  console.log("b", b);
  运行结果
  
 
  let obj1 = {
            a: 1,
            b: 2,
            c: {
                d: 3
            }
        }
   let obj2 = deepClone(obj1);
   obj2.a = 3;
   obj2.c.d = 4;
   console.log("obj1", obj1)
   console.log("obj2", obj2);
   运行结果

  

 

posted on 2023-01-09 09:04  一只向上爬的小蜗牛  阅读(30)  评论(0编辑  收藏  举报