深浅拷贝的理解与实现

赋值的话基本数据类型都会相互影响,注意深浅拷贝和赋值的差别

浅拷贝,要实现基本数据类型,互不影响，而引用类型会互相同步影响

定义的变量放在栈当中，引用类型放在堆当中

浅拷贝的方案

// 浅拷贝,要实现基本数据类型,互不影响，而引用类型会互相同步影响
// 在引用数据类型当中赋值可以实现浅拷贝的效果

var qian={
    z:1,
    x:2,
    y:3,
    q:function(){console.log(1)},
    r:[1,2,3],
    t:{a:1,b:2}
}

// 浅拷贝的方案函数封装如下shallowCopy
function shallowCopy(obj){
    var target={}
    for(var i in obj){
        if(obj.hasOwnProperty){
            target[i]=obj[i]
        }
    }
    return target
}

var p=shallowCopy(qian)
p.t.a=200
console.log("浅拷贝的结果",p)
console.log("函数原始内容",qian)


// 浅拷贝的方案Object.assign(cloneObj2,qian1)
var qian1={
    z:1,
    x:2,
    y:3,
    q:function(){console.log(1)},
    r:[1,2,3],
    t:{a:1,b:2}
}
var cloneObj2={}
cloneObj2= Object.assign(cloneObj2,qian1)
console.log("es6方法","Object.assign(cloneObj2,obj)",cloneObj2)
cloneObj2.t.a=520
console.log("原始内容",qian1)
console.log("修改后520的数据",cloneObj2)

深拷贝的方案

// 深拷贝
// JSON.parse(JSON.stringify()),可以实现深拷贝,但是有一个缺点就是你拷贝的内容有函数是无法实现深拷贝的
var srouce={
    a:1,
    b:2,
    c:3,
    d:function(){console.log(1)},
    e:[1,2],
    f:{m:1,j:2,n:3}
}
var srouce1=JSON.parse(JSON.stringify(srouce))
console.log("srouce",srouce,"srouce1",srouce1)
srouce1.a=1000
console.log("srouce",srouce,"srouce1",srouce1)

var ddd={a:1,b:2,c:function(){console.log(1)},d:[0,1,2],e:{a:1,b:2,c:3}}
function JQ(Boolean,cloneOver,obj){
// 用jQuery做深浅拷贝,使用$.extend方法,参数一填写一个布尔值,如果你想实现深拷贝就填true
// 浅拷贝参数一不填,参数二填一个空对象,拷贝结果放到参数二所以要填一个空数组
// 参数三填你想要拷贝的内容
    return $.extend(Boolean,cloneOver,obj)
}
console.log("ddd",ddd)
var xxxx=JQ({},ddd)
console.log("xxxx",xxxx)
xxxx.e.a=520
console.log("被浅克隆后",ddd)
var xxxx=JQ(true,{},ddd)
console.log("xxxx深拷贝",xxxx)

// 深拷贝的方案如下↓
obj={
    z:1,
    x:2,
    y:3
}
// es3方法
var cloneObj={}
for(var key in obj){
    cloneObj[key]=obj[key]
    console.log(cloneObj)
}
// es5方法
console.log("Object.getOwnPropertyNames(obj)",Object.getOwnPropertyNames(obj))
Object.getOwnPropertyNames(obj).forEach(function(item){
    cloneObj[key]=obj[key]
})
console.log("es5方法",cloneObj)
// es6方法
var cloneObj1={}
console.log("Object.entries(obj)",Object.entries(obj))
for(var[key,value] of Object.entries(obj)){
    cloneObj1[key]=value
}
console.log("es6方法",cloneObj1)