深拷贝

什么是深拷贝:

首先我们要明白一点,js中数据类型分为

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

对象数据类型(Object )

引用数据类型的值时保存在栈内存和堆内存中的对象.栈区内存保存变量标识符和指向堆内存中该对象的指针。当寻找引用值时，解释器会先寻找栈中的地址。然后根据地址找到堆内存的实体。

为什么要进行深拷贝

 首先我们先看代码:

let a = b = 2
a = 3
console.log(a)
console.log(b)
let c = d = [1,2,3]
let e = f = {a:1,b:2,c:3}
c[0] = 2
e.a = 2
console.log(d[0])
console.log(f.a)

 

会发现,同一个Array和Object赋值给两个不同变量时,变量指向的是同一个内存地址,所以就会造成其中一个变量改变属性值,同时改变另外一个变量的对应属性值.

实现深拷贝的几种方法:

递归深拷贝:

首先了解什么是递归 简单来说递归就是函数内部自己调用自己

使用递归首先我们先要找到规律 然后我们在找到出口

下面是一个简单的递归demo  帮助大家了解下递归的使用技巧

// 计算1+2+3+...+10的和
        function fun(i){
            if(i==1){
                return 1
            }
            return i+fun(i-1)
        }
        console.log(fun(10));

        // 10+fun(9)
        // 10+9+fun(8)
        // 10+9+8+fun(7)
        // 10+9+8+7+fun(6)
        // 10+9+8+7+6+fun(5)
        // 10+9+8+7+6+5+fun(4)
        // 10+9+8+7+6+5+4+fun(3)
        // 10+9+8+7+6+5+4+3+fun(2)
        // 10+9+8+7+6+5+4+3+2+fun(1)
        // 10+9+8+7+6+5+4+3+2+1

接下来我们来看如何使用递归来实现深拷贝的

        var obj = {
            name: '123',
            list: [{
                name: '456'
            }, {
                name: '789',
                say: 'qqq'
            }]
        }

        var a={};
        
        function fun(newobj,oldobj){
                for(var k in oldobj){
                    // 判断我们的属性值属于哪种数据类型
                    // 1.获取属性值 oldobj[k]
                    var item = oldobj[k];
                    // 2.判断这个值是否是数组
                    if(item instanceof Array){
                        newobj[k]=[];
                        fun(newobj[k],item);
                    // 3.判断这个值是否是对象
                    }else if(item instanceof Object){
                        newobj[k]={};
                        fun(newobj[k],item);
                    // 4.属于简单数据类型
                    }else{
                        newobj[k]=item;
                    }
                }
            }
            fun(a,obj);
            console.log(a);

接下来我们介绍一种简单的方法

JSON深拷贝

var data=[{
            name:'ya',
            list:[
                {name:'dddd'}
            ]
        }]
        // JSON 对象 作用：处理json格式的数据 其实就是数组和对象
        // JSON.stringify() 将数组或对象变为json字符串
        var dataStr=JSON.stringify(data);
        console.log(dataStr);
        
        // JSON.parse() 将json字符串转化为 数组或对象 并返回数组或对象
        var res=JSON.parse(dataStr);
        res.push({name:123})
        console.log(res);
        console.log(data);
        // json 字符串 与 普通字符串
        // 都是字符串 没区别 json 字符串长得像数组和对象 其实是字符串
        // json 对象与普通对象和数据区别是啥
        // 没区别  就是普通数组和对象 就是在 json 文件中按照 规定写。