JS中的浅拷贝和深拷贝

引用：https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html

按照百度上搜索的结果来说：

浅拷贝:只是增加了一个指针指向已经存在的内存。
例如：

<script type="text/javascript">
    var o1 = {a:1,b:2,c:3};
    var o2 = o1;
    o2.b = 20;  
    console.log(o1) //a:1,b:20,c:3
    console.log(o2) //a:1,b:20,c:3
</script>

表面上只修改了o2.b的值，但是o2和o1共享内存，所以o1.b的值也被更改了，这就是浅拷贝。

深拷贝：深拷贝就是增加一个指针并且申请一个新的内存，使这个增加的指针指向这个新的内存。
例如：

<script type="text/javascript">
    var o1 = {a:1,b:2,c:3};
    var o2 = {a:o1.a,b:o1.b,c:o1.c};
    o2.b = 20;  
    console.log(o1); //a:1,b:2,c:3
    console.log(o2); //a:1,b:20,c:3
</script>

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
相关连接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

针对Object.assign()方法的深拷贝问题，相关资料是这么说的：
针对深拷贝，需要使用其他方法，因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。

事实上Object.assign()方法是浅拷贝，但是如果被拷贝的对象只是一层的对象，是可以用Object.assign()方法实现深拷贝的，但是多层对象就不行了，如下：

<script type="text/javascript">
    var o1 = {a:{b:1}};
    var o2 = {};
    Object.assign(o2,o1);
    
    o2.a.b = 2;
    console.log(o1.a.b) //2
</script>

输出的是2 不是1 ，因为这里只拷贝了引用值。

这种情况下，可以用另外的方式来解决。
1、递归(代码转载自https://www.cnblogs.com/echolun/p/7889848.html)

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    
let a=[1,2,3,4],
    b=deepClone(a);
a[0]=2;
console.log(a,b);

2、JQ的extend

<script type="text/javascript">
     var a = {a:1,b:2};
     var b = {};
     $.extend(true, b, a);
     b.a = 3
     console.log(b) //3，2
     console.log(a) //1,2
</script>