js中的深浅拷贝

一.数据类型

数据分为基本数据类型和引用数据类型

基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)

引用数据类型（Object[Array属于Object]）

基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

二.直接赋值和浅拷贝，深拷贝的区别

1. 直接赋值：就是用一个变量去接收引用数据类型的堆地址，新旧对象还是共享同一块内存。
2. 浅拷贝：只拷贝父级对象，对于父级对象中的引用数据类型只拷贝其占内存中的指针地址，新旧对象中的引用数据类型还是共享同一块内存。
3. 深拷贝：拷贝父级对象和父级对象中的所有引用数据类型，会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

三.实现深浅拷贝

1. 浅拷贝，浅拷贝使用Object.assign（目标对象，被拷贝对象）来实现，该方法会把被拷贝对象复制到拷贝对象中，只要拷贝对象为一个空对象就行

    <script>
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18,
                color: ['pink', 'blue']
            }
        };
        var o = {}
        for (var k in obj) {
            // k 是属性名 obj[k] 是属性值
            o[k] = obj[k];
        }
        console.log(o.msg.age);// 18
        o.msg.age = 20;
        console.log(obj.msg.age);//20
 
        // Object.assign(o, obj) // 浅拷贝语法糖
        // console.log(o);
        // o.msg.age = 20;
        // console.log(obj);
    </script>

2. 深拷贝

    <script>
        var obj = {
            id: 1,
            name: 'andy',
            msg: {
                age: 18
            },
            color: ['pink', 'red']
        };
        var o = {};
        // 用递归的方式完成深拷贝
        // 封装函数
        function deepCopy(newobj, oldobj) {
            // 遍历oldobj的属性名
            for (var k in oldobj) {
                // 判断属性属于哪种数据类型
                // 1.获取属性值 oldobj[k]
                var item = oldobj[k];
                // 2.判断是否属于数组(因为数组也属于对象，所以必须先判断数组)
                if (item instanceof Array) {
                    newobj[k] = []; // (1)先给newobj添加一个属性k，同oldobj里的k
                    deepCopy(newobj[k], item) // (2)再用oldobj[k]赋值给newobj[k]
                } else if (item instanceof Object) {
                    // 3.判断是否属于对象
                    newobj[k] = {};
                    deepCopy(newobj[k], item)
                } else {
                    // 4.属于简单数据类型
                    newobj[k] = item
                }
 
            }
        }
        deepCopy(o, obj)
        console.log(o);
    </script>