js如何实现深浅拷贝

什么是js拷贝

js中的拷贝 ,大多数是数据之间的拷贝
简单数据类型:拷贝的是值
复杂类型的拷贝:拷贝的是地址
复杂类型的拷贝
a:浅拷贝:在对原始数据进行拷贝的时候,只拷贝一层数据,如果遇到对象,则直接拷贝对象的地址
浅拷贝语法:Object.assign()
代码验证:

  let obj ={
            uname:'zs',
            myLike:{
                name:'刘德华'
            }
        }
        let newObj ={}
        Object.assign(newObj,obj)
        console.log(obj);
        console.log(newObj);

在这里插入图片描述
这里就实现了一个浅拷贝
但是当我们修改了newObj的uname 和mylike里面的name时

  let obj ={
            uname:'zs',
            myLike:{
                name:'刘德华'
            }
        }
        let newObj ={}
        Object.assign(newObj,obj)
        console.log(obj);
        console.log(newObj);
        newObj.uname='ls'
         newObj.myLike.name='周星驰'
        console.log(obj);
        console.log(newObj);

我们再来看一下打印的值
在这里插入图片描述
uname 没有改变 但是name 都变成了周星驰 这是为什么呢

这就是因为当浅拷贝的时候是基础数据类型会拷贝值,而碰到复杂数据类型的时候只拷贝地址所以当你修改其中一个的话就会影响另一个
总结
浅拷贝在拷贝过程中遇到对象只会拷贝地址,且影响原始数据
b:深拷贝
在对原始数据进行拷贝的过程中,会将原始的数据在拷贝一份进行赋值,深拷贝不会影响原始数据

 let obj ={
            uname:'zs',
            myLike:{
                name:'刘德华'
            }
        }
        // 实现深拷贝
        // 语法: JSON.stringify() 返回值 返回对象形式字符串
                // JSON.parse()    返回一个对象
        let newObj ={}
        let res =JSON.stringify(obj)
         newObj=JSON.parse(res)
         console.log(obj);
         console.log(newObj);

在这里插入图片描述
当我们修改值后

 let obj ={
            uname:'zs',
            myLike:{
                name:'刘德华'
            }
        }
        // 实现深拷贝
        // 语法: JSON.stringify() 返回值 返回对象形式字符串
                // JSON.parse()    返回一个对象
        let newObj ={}
        let res =JSON.stringify(obj)
         newObj=JSON.parse(res)
         newObj.uname='ls'
         newObj.myLike.name='那英'
         console.log(obj);
         console.log(newObj);

在这里插入图片描述
我们发现不会影响原始数据obj的值,这是因为实现深拷贝后,会在内存中创建一个新的空间存放新对象的值

 console.log(obj===newObj);  //得到的是false

总结
深拷贝在拷贝过程中遇到对象会重新开辟内存空间,且不影响原始数据
常见的浅拷贝方式:
1.Object.assign()

2.使用扩展运算符。var cloneObj = { …obj };

Array.prototype.slice()。slice() 方法返回一个新的数组对象,这一对象是一个由 begin和 end(不包括end)决定的原数组的浅拷贝。原始数组不会被改变。
常见的深拷贝
1、递归递归去复制所有层级属性
2.除了递归,我们还可以借用JSON对象的parse和stringify
3.除了上面两种方法之外,我们还可以借用JQ的extend方法。
jq如何实现深浅拷贝
1.jq实现浅拷贝
语法 $extend(false,targetObj,currentObj)
语法介绍
第一个参数 拷贝的方式是深拷贝还是浅拷贝 默认就是浅拷贝
第二个参数用来接收拷贝的值
第三个参数被拷贝的值
2.jq实现深拷贝
语法 $extend(true,targetObj,currentObj)
参数同上

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值