前端数据浅拷贝和深拷贝

浅拷贝:就是一个新变量引用其他数据,如果变量数值变动,被引用的数据也会被改变,就是(一家人就是要整整齐齐的)/
深拷贝:就是引用其他数据,如果变量数值变动,被引用的数据不会被改变(翅膀硬了,单飞)

var a,b;
a=1;
b=a;
console.log('测试',a)
console.log('测试',b)
b=12;
console.log('测试',a)
console.log('测试',b)

在这里插入图片描述
从上面代码可以看出,基本类型的数据是深拷贝 名值存储在栈内存中,当你b=a复制时,栈内存会新开辟一个内存

var a={
  name:'流川枫'
}
b=a;
console.log('测试',a)
console.log('测试',b)
b.name='吴彦祖';
console.log('测试',a)
console.log('测试',b)

在这里插入图片描述
从上面代码可以看出,引用类型的数据是浅拷贝(数组也是) 名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值

实现深拷贝的方法
数组类型 使用concat

var d=['帅哥']
var e=[]
e=e.concat(d);
console.log('测试',d)
console.log('测试',e)
e[0]='美女';
console.log('测试',d)
console.log('测试',e)

!在这里插入图片描述](https://img-blog.csdnimg.cn/20200425201001585.png)

对象类型和数组类型 使用JSON.parse()和 JSON.stringify()

var a={
  name:'流川枫'
}
var b=JSON.parse(JSON.stringify(a));
console.log('测试',a)
console.log('测试',b)
b.name='吴彦祖';
console.log('测试',a)
console.log('测试',b)

在这里插入图片描述
使用SON.parse()和 JSON.stringify()和concat又有什么区别呢
假设现在有这么一个数据

var d=['帅哥',['小红','小明']]
var e=[]
e=e.concat(d)
console.log('测试',d)
console.log('测试',e)
e[0]='美女';
e[1][1]='小刚'
console.log('测试',d)
console.log('测试',e)

在这里插入图片描述
从图中可以看到数据的第一层做了深度拷贝但是第二层就变成了浅拷贝
使用SON.parse()和 JSON.stringify()呢????

var d=['帅哥',['小红','小明']]
var e=[]
var e=JSON.parse(JSON.stringify(d));
console.log('测试',d)
console.log('测试',e)
e[0]='美女';
e[1][1]='小刚'
console.log('测试',d)
console.log('测试',e)

在这里插入图片描述
解决了 233333333~~~~~~~

也可以将深拷贝封装成一个方法 直接调用

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象,如果是,递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是,简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}   
 let newValue = {
      name: '新的值'
    }
    oldValue = deepClone(a);
    oldValue.name = '深拷贝后数值'
    console.log('递归', newValue, oldValue);

在这里插入图片描述
Ending…

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值