对象浅拷贝和深拷贝有什么区别与实现方法

在JS中,除了基本数据类型,还存在对象、数组这种引用数据类型。

基本数据类型有number,string,boolean,null,undefined五类。

基本数据类型
名值存储在栈内存

当b=a复制时,栈内存会新开辟一个内存

  //基本数据类型的拷贝
  let a = 1;
  let b = a;
  console.log(a);
  
  a = 2;
  //此时修改a不会影响b
  console.log(b);

在这里插入图片描述
在这里插入图片描述

引用数据类型
名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值。

 let o1 = {
     a:1
 }

 let o2 = o1;

 o2.a = 2;
 console.log(o1.a); //2

在这里插入图片描述
在这里插入图片描述

当对 o2.a = 2; 时进行修改时,由于o1与o2指向的是同一个地址,所以自然o1也受了影响,这就是所谓的浅拷贝了。
在这里插入图片描述
基本数据类型,拷贝是直接拷贝变量的值,而引用类型拷贝的其实是变量的地址。

在这种情况下,如果改变o1或o2其中一个值的话,另一个也会变,因为它们都指向同一个地址

而浅拷贝和深拷贝就是在这个基础上做的区分,如果在拷贝这个对象的时候,只对基本数据类型进行了拷贝,而对引用数据类型只是进行了引用的传递,而没有重新创建一个对象,则认为是浅拷贝。反之,在对引用数据类型进行拷贝的时候,创建了一个对象,并且复制期内的成员变量,则认为是深拷贝

怎么去实现深拷贝呢?

  1. 使用递归去复制所有层级属性
//深拷贝实现方式

//第一种
function deepCopy(obj) {
    //生成新对象
    let objCopy = Array.isArray(obj)?[]:{};
    if(obj && typeof obj === "object"){
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key] && typeof obj[key] === "object"){
                    objCopy[key] = deepCopy(obj[key]);
                }else{
                    //如果不是直接复制
                    objCopy[key] = obj[key];
                }
            }
        }
    }
    return objCopy;
}

let obj1 = {
    a:{
        b:1
    }
}
console.log(obj1);

let obj2 = deepCopy(obj1);

obj1.c = {
    d:2
};
//obj2不受obj1的影响
console.log(obj2);

在这里插入图片描述
2. 借用JSON对象的parse和stringify

 //第二种借助JSON.parse() 和 JSON.stringify()
 function deepCopy(obj) {
     let _obj = JSON.stringify(obj);
     let objCopy = JSON.parse(_obj);
     return objCopy;
 }
 let obj3 = {
     a:{
         b:10
     }
 }
 console.log(obj3);

 let obj4 = deepCopy(obj3);

 obj3.c = {
     d:20
 };
 //obj4不受obj3的影响
 console.log(obj4);

在这里插入图片描述

以上就是个人对对象浅拷贝和深拷贝有什么区别与实现方法的见解,希望可以帮助到大家!

部分参考来源:https://blog.csdn.net/weixin_41910848/article/details/82144671

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值