深拷贝和浅拷贝 常用实现方法

查阅多篇文章后，自己归纳总结对深拷贝和浅拷贝的理解，不足之处，还望多多指导

一、引言

---

基本数据类型 的数据赋值后，更改赋值后的变量，两者互不影响；

let a = 100;
let b = a;
a = 200;

console.log(a); // 200
console.log(b); // 100

引用数据类型 的数据赋值后，将存放在栈内存中的地址赋值给接收的变量，更改赋值后的变量，会影响到原来的数据

// 复杂数据类型：Array、Object
let obj1 = {
     
    name:"小李",
    age:18
	}

let obj2 = obj1
obj1.age = 25;

console.log( obj1 ); 	// {name:"小李", age:25}
console.log( obj2 ); 	// {name:"小李", age:25}

针对以上问题 引出了本文的解决方案 深拷贝和浅拷贝

二、浅拷贝

---

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

缺陷： 浅拷贝只能实现一层的拷贝，无法进行深层次的拷贝

实现方法

1.Object.assign()

ES6中拷贝对象的方法，接受的第一个参数是拷贝的目标，剩下的参数是拷贝的源对象（可以是多个）

语法：Object.assign(target, ...sources)

举个栗子：

let obj1 = {
     
	name: "小李",
	age: 18
}
// Object.assign()  会返回一个新对象 
// 该方法等同于 = 赋值
// let obj2 = Object.assign({}, obj1)
let obj2 = {
     }
Object.assign(obj2, obj1)
obj1.name = '小张';
obj1.age = '25';

console.log(obj1); // {name:"小张", age:25}
console.log(obj2); // {name:"小李", age:18}

2.扩展运算符

如果属性都是基本类型的值的话,使用扩展运算符更加方便

3.concat()

语法：concat() 合并两个或多个数组，返回一个新数组。原数组不变

举个栗子：

let arr = [1,2,3,4];
let newArr = arr.concat()
arr.push(5);

console.log(arr);		// [1,2,3,4,5]
console.log(newArr );	// [1,2,3,4]

三、深拷贝

---

不管原数据中值是什么类型的数据，拷贝后的新数据跟原数据是相互独立，没有关联的

实现方法

1. 利用json数据和json字符串之间的转换

JSON.stringify() 将对象转换成JSON字符串

JSON.parse() 反序列化将JSON字符串变成一个新的对象

对于日常的开发需求(对象和数组)，使用这种方法是最简单和快捷的

缺点： 无法实现对对象中 方法 的深拷贝，会显示为undefined

let obj1 = {
     
	name: "小李",
	age: 18,
	father: {
     
		age: 40
	},
	fn: function () {
     
		return 123
	}
}
let temp = JSON.stringify(obj1)
let obj2 = JSON.parse(temp)

obj1.father.age = 50;

console.log(obj1); 		// {name:"小李", age:18, father:{age:50},fn()}
console.log(obj2); 		// {name:"小张", age:25, father:{age:40}}
console.log(obj2.fn) 	// underfind

2.$.extend()

直通车: https://www.jquery123.com/jQuery.extend/.

语法： jQuery.extend([deep], target, object1, [objectN])

deep默认为false

举个栗子：

let obj1 = {
     
	name: "小李",
	age: 18,
	father: {
     
		age: 40
	},
	fn: function () {
     
		return 123
	}
}

let obj2 = $.extend(true, {
     }, obj1)

obj1.father.age = 50;

console.log(obj1);
console.log(obj2);
console.log(obj2.fn);

运行结果：

3. 递归

function deepClone(obj) {
     
	// 定义一个对象，用来确定当前的参数是数组还是对象
	let objClone = Array.isArray(obj) ? [] : {
     };
	// 判断obj是否存在，且类型是对象。（typeof [] 也是 object）
	if (obj && typeof obj === "object") {
     
		// 遍历参数的键
		for (key in obj) {
     
			// hasOwnProperty() 方法不会检测对象的原型链，只会检测当前对象本身存在该属性时才返回 true，常与for...in使用
			// 判断对象是否存在该属性
			if (obj.hasOwnProperty(key)) {
     
				// 值是对象就递归
				if (obj[key] && typeof obj[key] === "object") {
     
					objClone[key] = deepClone(obj[key]);
				} else {
     
					// 基本数据类型  直接赋值
					objClone[key] = obj[key];
				}
			}
		}
	}
	return objClone;
}
let a = {
     
	name: "小李",
	age: 18,
	father: {
     
		name: "大李",
		age: 50
	},
	fn: function () {
     
		return 123
	}
}
let b = deepClone(a)
a.father.name = "老李"

console.log(a, b);

运行结果：