• JS深拷贝拷贝的区别?


    • 拷贝拷贝引用,共享内存
    • 深拷贝拷贝实例,不共享内存
     
    1. 浅拷贝:当一个对象拷贝另一个对象的数据时,只要一个对象的数据发生改变时,另一个对象的数据也会发生改变,因为浅拷贝拷贝的是引用的地址
    实现方式:
     ES6 Object.assign()与扩展运算符...,两者都是只有是多层时才是浅拷贝,如果是一层还是深拷贝
    参数1:空对象 参数2:需要拷贝的对象
    简单的赋值
     
    3. 深拷贝:当一个对象拷贝另一个对象数据时,其中一个对象的数据发生改变时,不会影响另一个对象数据的改变
    实现方法:
    $.extend(),除了可以给jQuery对象添加
    JSON.stringify()=>JSON.parse()
    slice, concat
    for遍历,将值存在另一个变量中(当对象嵌套多层无能为力)
    slice和concat这两个方法,仅适用于对不包含引用对象的一维数组的深拷贝
    •   浅拷贝(shallow copy):只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存;
    •   深拷贝(deep copy):复制并创建一个一摸一样的对象,不共享内存,修改新对象,旧对象保持不变。
    var a = 25;
    var b = a;
    b = 10;
    console.log(a);//25
    console.log(b);//10
    
    //浅拷贝
    var obj1 = { a: 10, b: 20, c: 30 };
    var obj2 = obj1;
    obj2.b = 40;
    console.log(obj1);// { a: 10, b: 40, c: 30 } 
    console.log(obj2);// { a: 10, b: 40, c: 30 }
    
    //深拷贝
    var obj1 = { a: 10, b: 20, c: 30 };
    var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
    obj2.b = 40;
    console.log(obj1);// { a: 10, b: 20, c: 30 }
    console.log(obj2);// { a: 10, b: 40, c: 30 }
    

      

    深拷贝是指复制对象的所有层级,实现方法
    (1)通过递归实现
        deepCopy(o) {
            if (o instanceof Array) {
                let n = [];
                for (let i = 0; i < o.length; ++i) {
                    n[i] = deepCopy(o[i]);
                }
                return n;
            } else if (o instanceof Object) {
                let n = {}
                for (let i in o) {
                    n[i] = deepCopy(o[i]);
                }
                return n;
            } else {
                return o;
            }
        }
    ( 2) 通过JSON解析实现
        //把一个对象转成json字符串在转成json对象
        JSON.parse(JSON.stringify(o))

    浅拷贝的实现

    var json1 = {"a":"name","arr1":[1,2,3]}
    function copy(obj1) {
        var obj2 = {};
        for (var i in obj1) {
          obj2[i] = obj1[i];
        }
        return obj2;
    }
    var json2 = copy(json1);
    json1.arr1.push(4);
    alert(json1.arr1); //1234
    alert(json2.arr1) //1234
    

      



     

    -------------------------------------------

    个性签名:独学而无友,则孤陋而寡闻。做一个灵魂有趣的人!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!

    万水千山总是情,打赏一分行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主,哈哈哈(っ•̀ω•́)っ✎⁾⁾!

  • 相关阅读:
    Vue Supermall蘑菇街API后端接口
    Vue UI库:ElementUI使用教程
    Python操作数据库,读取数据并按照json格式写入json文件
    css 轮播图
    ArcGIS Server密码重置
    JavaScript之箭头函数
    arcgis属性对比
    JavaScript之Promise
    很遥远
    请不要等到四十年后才明白
  • 原文地址:https://www.cnblogs.com/mahmud/p/10212799.html
Copyright © 2020-2023  润新知