深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。

浅拷贝和深拷贝的示意图大致如下:

http://wx2.sinaimg.cn/mw690/63918611gy1fysjbtq7llj208m06bq40.jpg

浅拷贝只复制指向某个对象的指针而不复制对象本身,新旧对象还是共享同一块内存。

但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。

 

 

 

 

赋值和浅拷贝的区别

深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体,而不是引用。

假设B复制了A,修改A的时候,看B是否发生变化:

如果B跟着也变了,说明是浅拷贝,拿人手短!(修改堆内存中的同一个值)

如果B没有改变,说明是深拷贝,自食其力!(修改堆内存中的不同的值)

 

浅拷贝(shallowCopy)只是增加了一个指针指向已存在的内存地址,

深拷贝(deepCopy)是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存,

 

  • 对象赋值:
    
     var obj1 = {
    
        'name' : 'zhangsan',
    
        'age' :  '18',
    
        'language' : [1,[2,3],[4,5]],
    
    };
    
    var obj2 = obj1;
    
    obj2.name = "lisi";
    
    obj2.language[1] = ["",""];
    
    console.log('obj1',obj1)
    
    console.log('obj2',obj2)

    http://wx2.sinaimg.cn/mw690/63918611gy1fysjbu54fwj20bi0a1aal.jpg

  对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况。

 

 

 

http://wx1.sinaimg.cn/mw690/63918611gy1fysjbuvhckj20h8059jri.jpg

 

浅拷贝的实现方式

1.Object.assign()

关于Object.assign是浅拷贝还是深拷贝的问题:

     答:第一级属性深拷贝,从第二级属性开始就是浅拷贝。

示例:

//示例1  一层深拷贝
let obj = {a:1}
let newObj = Object.assign({},obj);
console.log(newObj); //{a: 1}
newObj.a=2;
console.log(obj); //{a:1}
console.log(newObj); //{a: 2}
 
 
//示例2  二层浅拷贝
let obj = {a:1,b:{name:"zhangsan"}}
let newObj = Object.assign({},obj);
console.log(newObj); //{a:1,b:{name:"zhangsan"}}
newObj.b.name="lisi";
console.log(obj); //{a:1,b:{name:"lisi"}}
console.log(newObj); //{a:1,b:{name:"lisi"}}

 

深拷贝的实现方式

1、JSON.parse(JSON.stringify())

let arr = [1, 3, {

    username: ' kobe'

}];

let arr4 = JSON.parse(JSON.stringify(arr));

arr4[2].username = 'duncan';

console.log(arr, arr4)

http://wx1.sinaimg.cn/mw690/63918611gy1fysjbwa833j20bm02w74a.jpg

原理: 用JSON.stringify将对象转成JSON字符串,再用JSON.parse()把字符串解析成对象,一去一来,新的对象产生了,而且对象会开辟新的栈,实现深拷贝。

这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

 

递归拷贝

 

 

https://blog.csdn.net/weixin_37719279/article/details/81240658?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

posted on 2020-10-10 16:38  京鸿一瞥  阅读(114)  评论(0)    收藏  举报