Java教程

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

本文主要是介绍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)

在这里插入图片描述

这篇关于JavaScript中的浅拷贝,深拷贝的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!