JS中深拷贝与浅拷贝的区别(简析)

深拷贝与浅拷贝的区别之前我们得知道基本数据类型和引用数据类型以及堆栈

基本数据类型/简单数据类型:number,string,boolean,null,undefined,symbol基本数据类型,在存储时变量中存储的是值本身。

引用数据类型:Object,Array等在存储时变量中存储的是地址。

堆:用于引用数据类型分配空间,例如数组对象、object对象

栈:主要存放一些基本类型的变量和对象的引用

深拷贝和浅拷贝

深拷贝和浅拷贝只针对引用数据类型

深拷贝:

深拷贝方式其一:JSON.parse(JSON.stringify())

var obj1 = {
            age: 10,
            sex: "男",
            say:function(){
                console.log('hi')
            }
        };
        let obj2=JSON.parse(JSON.stringify(obj1))
        console.log(obj2) //{age: 10, sex: '男'}
        obj2.age=22
        obj2.sex='女'
        console.log(obj1) //{age: 10, sex: '男', say: ƒ}
        console.log(obj2) //{age: 22, sex: '女'}

浅拷贝:

实现方式之一: =直接赋值

var obj1 = {
            age: 10,
            sex: "男",
            say:function(){
                console.log('hi')
            }
        };
        var obj2=obj1
        console.log(obj2)//{age: 10, sex: '男', say: ƒ}
        obj1.age=22
        console.log(obj2)//{age: 22, sex: '男', say: ƒ}
        

以上两个例子可以看出二者的区别:

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

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

ps:
        实现深拷贝的方式
还有很多种例如:
        JSON.parse(JSON.stringify())(这种方式无法拷贝 正则表达式,undefine,function) 
        for…in(无嵌套的情况下为深拷)
        Object.assign()(只复制源对象中可枚举的属性和对象自身的属性。如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖
         递归 
         jQuery中的$.extend()(第一个参数 true 为深拷贝,false 为浅拷贝
        slice()
        concat()


       实现浅拷贝的方式除了赋值外用Object.assign()也可以实现(注意:处理的对象只有一层时则是深拷贝)


版权声明:本文为ThePlacebo原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。