编程语言
首页 > 编程语言> > 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)

在这里插入图片描述

标签:obj,log,JavaScript,newObj,key,使用,console,拷贝
来源: https://blog.csdn.net/beekim/article/details/120095249