JavaScript中的浅拷贝,深拷贝的使用

1,浅拷贝

首先定义一个对象

var obj={
          name:'托马',
          area:['稻妻','蒙德','须弥'],
          attr:'火'
      }

然后封装一个函数

function copy(obj){
            var newObj={}

            //遍历对象
            for(var key in obj){
                newObj[key]=obj[key]
            }
            return newObj
        }

测试:

 var newObj=copy(obj)
        console.log(obj)
        console.log(newObj)

复制成功:
在这里插入图片描述
再次测试:

newObj.name='七七'
newObj.area.push('璃月')
console.log(obj)
console.log(newObj)

结果:
在这里插入图片描述
结果显示,name修改成功,但是对newObj对象的area进行push值的时候,原来的obj也跟着改变了。这种情况下,浅拷贝就不起作用了,我们需要用到深拷贝。

2,深拷贝

当复制的对象里面的属性含有引用类型时(object),浅拷贝复制之后,对原对象的引用类型的值进行改变时,新复制的对象的值也会跟着原对象而改变。

封装深拷贝函数:

function deepcopy(obj,arr){
    var newObj=arr || {}

    //遍历对象
    for(var key in obj){
        //判断当前key值为引用类型(object)还是值类型
        if(typeof obj[key]=='object'){
            //判断当前key值是个对象还是数组
            newObj[key]= obj[key].constructor==Array ? []:{}
            //递归调用
            deepcopy(obj[key],newObj[key])
        }else{
            newObj[key]= obj[key]
        }
    }
    return newObj
}

测试:

var newoo=deepcopy(obj)
console.log(obj)
console.log(newoo)

在这里插入图片描述
深拷贝测试:

newoo.area.push('纳塔')
console.log(obj)
console.log(newoo)

在这里插入图片描述

3.扩展

1 还可以使用slice或者concat来进行浅拷贝
2 对于含有引用类型的数组或者对象可以先将其转为全字符串,再拷贝,然后再将拷贝完的结果还原为数组或者对象,类似于:

JSON.parse(JSON.stringify(...))
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值