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中的浅拷贝，深拷贝的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！