• 技术文章 >Web开发 >JavaScript

    javascript中浅拷贝是什么

    小妮浅浅小妮浅浅2021-09-03 12:31:25原创122

    1、简单复制对象的最外层属性,不处理对象更深层次的对象属性,会导致复制对象和原始对象的深层次属性指向同一个内存。

    2、如果一个对象改变了内存的地址,就会影响另一个对象。

    将对象序列化为JSON字符串,然后通过JSON.parse()将字符串生成新的对象,实现深度复制。

    实例

            let arr = [],
     obj = {
    a: 1
    }
    for(let i = 0; i < 3; i++) {
     
    arr.push(obj)
     
    }
    // 基本变量的值一般都是存在栈内存中,而对象类型的变量的值存储在堆内存中,栈内存存储对应空间地址。基本的数据类型: Number 、Boolean、Undefined、String、Null。
    console.log(arr) //[{ a: 2 },{ a: 2 },{ a: 2 }] 内存地址被替换指向{a:2}
    console.log(JSON.parse(JSON.stringify(arr))) //[{ a: 1 },{ a: 1 }]防止重新赋值
    console.log(obj)//{a:1}
    //当我们执行obj.a = 2 时,堆内存就有新的对象{a:2},栈内存的b指向新的空间地址( 指向{a:2} ),而堆内存中原来的{a:1}就会被程序引擎垃圾回收掉,节约内存空间。
    obj.a = 2
    console.log(obj)//{a:2}
    console.log(arr) //[{ a: 2 },{ a: 2 }]
     
    console.log("//")
     
    // 深拷贝  如果对象的属性值为一般类型(string, number),通过Object.assign({},srcObj)得到的新对象是深拷贝
    let obj1 = {
    a: 1,
    b: 2
    };
     
    let obj2 = Object.assign({}, obj1, {
    b: 20
    });
     
    console.log('obj1', obj1); // { a: 1, b: 2 }
    console.log('obj2', obj2); // { a: 1, b: 20 }
     
    console.log("//")
     
    // 浅拷贝  如果属性值为对象或其它引用类型,通过Object.assign({},srcObj)得到的新对象是浅拷贝
    obj1 = {
    a: 1,
    b: {
    c: 2,
    d: 3
    }
    };
    obj2 = Object.assign({}, obj1);
    obj2.a = 10;
    obj2.b.c = 20;
    console.log('obj1', obj1); // { a: 1, b: { c: 20, d: 3 } }
    console.log("obj2", obj2) //{ a: 10, b: { c: 20, d: 3} }
    console.log("//")
    //Object.assign({})和Object.assign()   里面加与不加{}的区别   ;
    var test1 = {
    a: 'a'
    },
     
    test2 = {
    b: {
    c: 1
    }
    };
     
    // Object.assign({}) 原始对象不会被改变
    console.log(Object.assign({}, test1, test2)); //合并之后{ a: "a", b: {c:1} }
    console.log(test1) // {a:'a'}
    console.log(test2) // {b:{c:1}}
    // Object.assign() 原始对象会被改变(改变的只是被覆盖的原始对象test2覆盖test1)
    console.log(Object.assign(test1, test2)); //合并之后{ a: "a", b: {c:1} }
    console.log(test1) //{ a: "a", b: {c:1} }
    console.log(test2) // {b:{c:1}}
    //当替换一下被覆盖的对象test1覆盖test2
    console.log(Object.assign(test2, test1)); //合并之后{ a: "a", b: {c:1} }
    console.log(test1) //{ a: "a"}此结果是在上面test2覆盖test1测试注释情况下得到,如果不注释打印得到{ a: "a", b: {c:1} },因为上面test1={ a: "a", b: {c:1} }
    console.log(test2) // { a: "a", b: {c:1} }

    以上就是javascript中浅拷贝的介绍,希望对大家有所帮助。更多Javascript学习指路:Javascript

    专题推荐:javascript 浅拷贝
    品易云
    上一篇:javascript中函数作用域的介绍 下一篇:javascript中JSON.stringify的注意点

    相关文章推荐

    • javascript中generator函数的介绍• javascript生成器函数的特点• javascript中yield关键字的使用• javascript数组中findIndex()的使用• javascript数组检查是否存在给定元素• javascript中throw和next方法的比较• javascript中的3个组成部分• javascript是脚本语言吗• javascript超级的介绍• javascript是编程语言吗• javascript变量命名的原则• JavaScript如何求数组的质数• javascript方法和函数的区别• javascript中debugger的应用场景• javascript中函数作用域的介绍

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网