zoukankan      html  css  js  c++  java
  • 什么是深拷贝?什么是浅拷贝?如何实现深拷贝?

    深拷贝和浅拷贝是针对引用类型的

    浅拷贝:

    简单来说就是一个对象B复制另一个对象A,当改变B对象的值是A对象的值也随之改变

    举个例子

    var  obj1={a:1,b:5,c:3};
    var  obj2=obj1;
    obj2.b=2;
    console.log(obj1.b);  //2
    console.log(obj2.b);  //2

    可以看到两个对象的值都被修改了。

    浅拷贝:就是拷贝对象的引用,而不深层次的拷贝对象的,多个对象指向堆内存中的同一对象,,任何一个修改都会是使得所有对象的值被修改,因为它们公用一条数据。

    深拷贝:

    简单来说就是一个对象B复制另一个对象A,当改变B对象的值是A对象的值不会改变

    举个例子:

    var a=2;
    var b=a;
    b=3;
    console.log(a);//2
    console.log(b);//3

    以上例子说明两个变量使用的是独立的数据。对于基本数据类型来说不存在深拷贝、浅拷贝。直接赋值就是深拷贝。

    深拷贝:深拷贝不会拷贝引用类型的引用,拷贝的是引用类型的值,形成一个新的引用类型。

    如何实现深拷贝:

    JSON.Stringify(JSON.pare())   不支持多层引用嵌套,不支持函数Map、Sep等类型的数据

    var  obj1={a:1,b:5,c:3};
    var  obj2=JSON.Stringify(JSON.parse(obj1));
    obj2.b=2;
    console.log(obj1.b);  //5
    console.log(obj2.b);  //2

    展开运算符   ...

    var  obj1={a:1,b:5,c:3};
    var  obj2=(...obj1)
    obj2.b=2;
    console.log(obj1.b);  //5
    console.log(obj2.b);  //2

    Object.asssign(target,sourse)

    var  obj1={a:1,b:5,c:3};
    var  obj2=Object.assign({},obj1)
    obj2.b=2;
    console.log(obj1.b);  //5
    console.log(obj2.b);  //2

    深拷贝函数,递归

                // target 要拷贝的对象
                function deepClone(target){
                    //定义一个拷贝对象
                    let result;
                    // 判断拷贝目标是不是Object对象
                    if(typeof target==='object'){
                        // 判断是否是数组类型
                        if(Array.isArray(target)){
                            // 定义为数组
                            result=[];
                            for(let i in target){
                                result.push(deepClone(target[i]));
                            }
                        }else if(target===null){
                            // 直接赋值
                            result=null;
                        }else if(target.constructor===RegExp){
                            // 直接赋值
                            result=target;
                            // 不是特殊的对象
                        }else{
                            result={};
                            for(let i in target){
                                // 递归
                                result[i]=deepClone(target[i]);
                            }
                        }
                        // 基本数据类型  直接赋值
                    }else{
                        result=target;
                    }
                    return result;
                }
    
    

    var obj1={
    a:{z:1,c:null},
    b:[1,2,3,5],
    c:function(){console.log(this.a)}
    }
    var obj2=deepClone(obj1);
    console.log(obj2);
    obj2.b[0]=2;
    obj2.a[0]=2;
    console.log(obj1.a)
    console.log(obj2.a)
    console.log(obj1.b)
    console.log(obj2.b)
    console.log(obj2.c())

    
    

      

  • 相关阅读:
    List of XML and HTML character entity references
    Windows 如何查看端口占用情况?
    input placeholder文字垂直居中(Mobile & PC)
    使用CSS3改变选中元素背景色
    登录远程SQL服务器
    写了一个简洁的删除重复行的case
    自动驾驶中的计算机视觉
    ImageNet图像分类大赛
    在IDEA中使用MyBatis Generator逆向工程生成代码
    利用浏览器LocalStorage缓存图片,视频文件
  • 原文地址:https://www.cnblogs.com/babilong/p/13626048.html
Copyright © 2011-2022 走看看