javascript深浅拷贝

一：首先我们先来看一下js有哪些基础数据类型

基础类型：undefined，unll，number，string，boolean，symbol

引用类型：object对象类型（object，array，function，data）

 

二：对于这两种类型有几个关键知识点

基础类型存在于栈中

引用类型的值是同时保存在栈内存和堆内存中的对象

javascript的变量的存储方式 栈(stack) 和堆(heap)

关于栈和堆有几个关键点需要了解

1 栈(stack)是后进先出，堆(heap)是先进先出。

2 栈(stack)内存是我们手动分配, 堆(heap)内存是自动分配。

 

 

 

1 对象和数组的赋值操作

对象：

        let obj1 = {name:'gsq',age:18}
        let obj2 = obj1
        console.log(obj1.age === obj2.age); //true
        obj2.age = 90
        console.log(obj1.age === obj2.age); //true 

我们发现当修改了obj2的age的时候obj1也跟着改变

对于这种对象赋值，两个对象指向的事同一块内存地址，当对象获取key值然后重新赋值，是可以改变值的，这样可以寻找到对象的指针。如果直接改变值，这样是不可以改变的。因为寻不到地址。

数组：

        let arr1 = [1,2,3,4,5]
        let arr2 = arr1
        console.log(arr1[0] === arr2[0]) //true
        arr2[0] = 1000
        console.log(arr1[0] === arr2[0])  //true

发现也是和对象是一样的，arr1和arr2是这个数组对象的一个堆引用地址，指向的是同一个对象

 

好了，以上就是对数据类型基本的认识

 

浅拷贝

        修改新变量的值会影响原有的变量的值

        默认情况下引用类型都是浅拷贝

        let a = {
            "fdf":12,
            "fdttf":[1,2,3,45,6],
            "fdfdfd":{
                "rere":"rerer",
                "erer":{
                    "fdfdffd":122323
                }
            }
        }
        let b = {

        }
        //1:使用方法的形式  只能拷贝第一层
        // assign方法是将a的所有的值赋值到b中
        // Object.assign(b,a)
        // console.log(b); //跟a一模一样
        // b.fdf = "434545" //修改b的fdf键的值
        // console.log(a.fdf) //输出12  ，发现这个2个对象是都有一个独立的内存空间了

        //2:自己实现 只复制一层的浅拷贝
        // for(let key in a){
        //     b[key] = a[key]
        // }
        console.log(b);
        b.fdf = "fdfdfdfdfdfdfdf"; //修改第一层的基本类型数据
        console.log(a.fdf);  //发现，修改后与b无瓜
        b.fdttf = "dfsfdsfsdf"  //修改第一层的基本类型数据
        console.log(a.fdttf); //发现，修改后与b无瓜
        b.fdfdfd.rere = "fdfdfdfdfdfdfdf"; //修改第二层的基本类型数据
        console.log(a.fdfdfd.rere)  //发现，修改后与b有瓜

 

深拷贝

        修改新变量的值不会影响原有变量的值

        默认情况下基本数据类型都是深拷贝

　　

自己实现的方法

        let a = {
            "fdf":12,
            "fdttf":[1,2,3,45,6],
            "fdfdfd":{
                "rere":"rerer",
                "erer":{
                    "fdfdffd":122323
                }
            }
        }
        let b = {

        }     
        // 封装一个深拷贝的函数
        function depCopy(target, source) {
            // 1.通过遍历拿到source中所有的属性
            for(let key in source){
                // console.log(key);
                // 2.取出当前遍历到的属性对应的取值
                let sourceValue = source[key];
                // console.log(sourceValue);
                // 3.判断当前的取值是否是引用数据类型
                if(sourceValue instanceof Object){
                    // console.log(sourceValue.constructor);
                    // console.log(new sourceValue.constructor);
                    let subTarget = new sourceValue.constructor;
                    target[key] = subTarget;
                    depCopy(subTarget, sourceValue);
                }else{
                    target[key] = sourceValue;
                }
            }
        }

        depCopy(b,a);
        b.fdfdfd.rere = "fdfdfdfdfdfdfdf1323"
        console.log(a.fdfdfd.rere === b.fdfdfd.rere); //false