深拷贝与浅拷贝的区别

1、回顾

复制代码
数据传递的方法:

    值传递:基本数据类型的数据不会发改变,因为基本数据类型一般存放在栈里面,值传递只是将数据拷贝了一份给另一个变量

    引用传递:会改变内存中的数据,因为引用类型的数据都存放在堆里面,栈里面存放的是索引,拷贝的时候是拷贝的地址也就是索引

例如:

    值传递

    var a = 10;
    var b = a;
    b+=10;
    console.log(a);//10
    console.log(b);//20;


    引用传递

    var arr = [10,20,30,40];
    var newArr = arr;
    newArr[0] = 80;
    console.log(arr);//[80,20,30,40]
    console.log(newArr);//[80,20,30,40];

    因为引用数据类型传递是保存了内存中的地址,当一个数据发生改变的时候 地址里面的数据也会发送改变
复制代码

2、浅拷贝

复制代码
浅拷贝:所谓的浅拷贝就是复制一份引用数据类型的地址,当改变了内存中数据的某一个值得话,也会影响到另一个对象

浅拷贝的方式:
   
   浅拷贝1
    var obj = {name:"张三",age:19,sex:"男"}
    var newObj = obj;

    newObj.name="李四";
    console.log(obj);//{name:"李四",age:19,sex:"男"}
    console.log(newObj);//{name:"李四",age:19,sex:"男"}


    浅拷贝2 
        Object.assgin()
        参数1:目标对象
        参数2:任意多个对象

        如果对象是多层的话
        var obj = {data:{a:1,b:2,c:3}};

        var obj1 = Object.assign({},obj);
        obj1.data.a = 10;
        console.log(obj);//{data:{a:10,b:2,c:3}}


    浅拷贝3
        封装CopyAttr()
        如果对象是多层的话
    function copyAttr(obj){
        var newObj = {};
        for(var key in obj){
            newObj[key] = obj[key];
        }
        return newObj;
    }

    var obj = {data:{a:1,b:2,c:3}};
    var newObj = copyAttr(obj);
    newObj.data.a = 10;
    console.log(obj)//{data:{a:10,b:2,c:3}}


  浅拷贝4
        $.extend({},obj)
        var obj = {data:{a:1,b:2,c:3}};
        var newObj = $.extend({},obj);
        newObj.data.a = 10;
        console.log(obj);//{a: 10, b: 2, c: 3}
        console.log(newObj);//{a: 10, b: 2, c: 3}
复制代码

3、深拷贝

复制代码

深拷贝:所谓的深拷贝就是复制一份引用数据类型的数据,当改变了数据的某一个值得话,不会影响到另一个对象(注意深拷贝是拷贝的数据,而不是索引,浅拷贝拷贝的是索引而不是数据)

深拷贝1 Object.assign(); 如果对象只有一层的 var obj = {a:1,b:2,c:3}; var newObj = Object.assign({},obj); newObj.a = 10; console.log(obj);//{a: 1, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3} 深拷贝2 $.extend(true,{},obj) var obj = {a:1,b:2,c:3}; var newObj = $.extend(true,{},obj); newObj.a = 10; console.log(obj);//{a: 1, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3} 深拷贝3 JSON.stringify() var obj = {data:{a:1,b:2,c:3}}; var newObj = JSON.parse(JSON.stringify(obj)); newObj.data.a = 10; console.log(obj);//{a: 1, b: 2, c: 3} console.log(newObj);//{a: 10, b: 2, c: 3} 缺点:没有办法将函数转换为json
原文地址:https://www.cnblogs.com/wswm/p/10623455.html