深拷贝(三种方法)

目录

 

在学习深拷贝之前，我们要先搞明白什么是深拷贝？

深拷贝

深拷贝的实现

---

在学习深拷贝之前，我们要先搞明白什么是深拷贝？

在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中。

1、当我们对数据进行操作的时候，会发生两种情况

基本数据类型

var a = 3;
var b = a;
b = 5;
console.log(a); // 3
console.log(b); // 5

可以看到的是对于基本类型来说，我们将一个基本类型的值赋予 a 变量，接着将 a 的值赋予变量 b ；然后我们修改 b ；可以看到 b 被修改了，而 a 的值没有被修改，两个变量都使用的是独立的数据；
引用数据类型

var obj1 = {
    a:  1,
    b:  2,
    c:  3
}
var obj2 = obj1;
obj2.a = 5;
console.log(obj1.a);  // 5
console.log(obj2.a);  // 5

可以看到的是，两个对象的值全部被修改了
对象是引用类型的值，对于引用类型来说，我们将 obj1 赋予 obj2 的时候，我们其实仅仅只是将 obj1 存储在栈堆中的的引用赋予了 obj2 ，而两个对象此时指向的是在堆内存中的同一个数据，所以当我们修改任意一个值的时候，修改的都是堆内存中的数据，而不是引用，所以只要修改了，同样引用的对象的值也自然而然的发生了改变

深拷贝

深拷贝作用在引用类型上！例如：Object，Array
深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突。

深拷贝的实现

1、使用JSON.stringify()以及JSON.parse()

先转化为字符串，在转换回来

 var obj1 = {
    a: 1,
    b: 2,
    c: 3
}
var objString = JSON.stringify(obj1);
var obj2 = JSON.parse(objString);
obj2.a = 5;
console.log(obj1.a);  // 1
console.log(obj2.a); // 5

可以看到没有发生引用问题，修改obj2的数据，并不会对obj1造成任何影响
但是使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined ， function， RegExp 等等类型的

2、使用递归

使用for in 循环拷贝其值

function ss(obj) {
// 创建一个函数
        if (typeof obj != "object" || obj == null) {
        // 判断参数如果不是对象，就返回
            return obj;
        };
        let obj1 = {};
        // 用于拷贝数据
        if (typeof obj == "object") {
        // 如果是对象进行for in 循环
            for (let i in obj) {
            // i是对象的每一个key
                obj1[i] = ss(obj[i]);
                // 进行循环拷贝， 再次调用自身，如果是对象还回循环拷贝，如果不是对象
                // 刚进入函数就回被返回
            };
            return obj2;
        }
    }

 3、借用JQ的extend方法

（1）吧extend函数的第一个参数设置为true

var p = {
	"id":"007",
	"name":"刘德华",
	"wife":{
		"id":"008",
		"name":"刘德的妻子",
		"address":{
			"city":"北京",
			"area":"海淀区"
		}
	}
}
 
 
//深度拷贝的方式（把extend函数的第一个参数设置为true）,把p的属性合并到jQuery（$）上
 
$.extend(true,$,p);
 
p.wife.name="张三疯";
p.wife.address.city="香港";
 
console.log($.id);
console.log($.wife.name);
console.log($.wife.address.city);
 
console.log(p);

 （2）extend函数里不传入第一个参数，默认为false

//二、浅拷贝的方式（extend函数里不传入第一个参数，默认为false）,把p的属性合并到jQuery（$）上，但是共享引用类型的属性wife和address
 
var p = {
	"id":"007",
	"name":"刘德华",
	"wife":{
		"id":"008",
		"name":"刘德的妻子",
		"address":{
			"city":"北京",
			"area":"海淀区"
		}
	}
}
$.extend($,p);//或者 $.extend(p);
 
p.wife.name="张三疯";
p.wife.address.city="香港";
 
console.log($.id);
console.log($.wife.name);
console.log($.wife.address.city);
 
console.log(p);