JavaScript深浅拷贝原理

1.赋值

首先应当知道：
基本数据类型：赋值，赋值之后两个变量互不影响
（字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol）
引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响
（对象(Object)、数组(Array)、函数(Function)）

对基本类型进行赋值操作，两个变量互不影响。

var a=0;
b=a;
a=1;
console.log(a) //a=1
console.log(b) //b=0

对引用类型进行赋址操作，两个变量指向同一个对象，改变变量 a 之后会影响变量 b，哪怕改变的只是对象 a 中的基本类型数据。

<script>
var a={
    x:1
}
var b=a;
a.x=2
console.log(a.x)//等于2
console.log(b.x)//等于2

</script>

2.浅拷贝

1.什么是浅拷贝
创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。

简单来说可以理解为浅拷贝只解决了第一层的问题，拷贝第一层的基本类型值，以及第一层的引用类型地址

2.浅拷贝的使用
2.1对象的浅拷贝
Object.assign()：方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象

<script>
    var a = {
        a_x: 1,
        a_y: {
            y: 2
        }
    }
    //这两种方式效果一样，下面一种为es6的解构赋值
    var y = Object.assign({}, a)
    var y = { ...a }

    a.a_x = 0;
    a.a_y.y = 0;
    console.log(y)
// {
//     a_x:1,
//     a_y:{
//         y:0
//     }
// }

</script>

2.2数组的浅拷贝
slice() 方法可从已有的数组中返回选定的元素。

<script>

    let a = [0, "1", [2, 3]];
    let b = a.slice(0);
    console.log(b);
    // [0，"1", [2, 3]]

    a[1] = "99";
    a[2][0] = 4;
    console.log(a);
    // [0, "99", [4, 3]]

    console.log(b);
//  [0,"1", [4, 3]]

</script>

3.深拷贝

1.什么是深拷贝
深拷贝会拷贝所有的属性，并拷贝属性指向的动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。
2.深拷贝的使用

JSON.parse(JSON.stringify());
JSON.parse()字符串变成对象
JSON.stringify()对象编程字符串

对象的深拷贝

<script>
    var a = {
        a_x: 1,
        a_y: {
            y: 2
        }
    }

    var b = JSON.parse(JSON.stringify(a));


    a.a_x = 0;
    a.a_y.y = 0;
    console.log(b)
    // {
    //     a_x:1,
    //     a_y:{
    //         y:2
    //     }
    // }

</script>

数组的深拷贝

<script>

    let a = [0, "1", [2, 3]];
    let b = JSON.parse(JSON.stringify(a.slice(0))) 
   
    a[1] = "99";
    a[2][0] = 4;

    console.log(b);
    //  [0,"1", [2, 3]]

</script>

问题：
但是该方法有以下几个问题。

1、会忽略 undefined

2、会忽略 symbol

3、不能序列化函数

4、不能解决循环引用的对象

5、不能正确处理new Date()

6、不能处理正则

3.总结

引用数据类型	和原数据是否指向同一对象	第一层数据为基本数据类型	原数据中包含子对象
赋值	true	改变数据会一起改变	改变数据会一起改变
浅拷贝	false	改变数据不会一起改变	改变数据会一起改变
深拷贝	false	改变数据不会一起改变	改变数据不会一起改变