JS深拷贝和浅拷贝

JS的数据类型

首先要搞懂JS的数据类型，JS的数据类型分为基本类型和引用类型

基本类型

• String
• Number
• Boolean
• undefined
• Null

引用类型

• Object(常用的包含Array，Function，Data)

基本类型创建

js在创建一个基本数据类型时，直接将变量的值保存在栈内存中，例如：

let name = "andy";
let age = 20;

其在栈内存中的保存如下：

栈区
name	andy
age	20

引用类型创建

在创建引用类型时，会在栈内存中保存一个地址信息，实际值保存在堆内存中，在对引用类型做出改变的时候，会改变其在堆内存中的值。

let arr1 = new Array(); 
let arr2 = new Array();
let obj = {name: 'andy', age:20};
let obj2 = {name: 'andy', age: 20};

栈区		堆区
arr1	引用地址1	[]
arr2	引用地址2	[]
obj	引用地址3	name	andy
		age	20

console.log(arr1 == arr2)   //会比较arr1和arr2指向的地址，两个地址不同，返回false
console.log(obj == obj2); //false 同理
console.log(arr1.toString() == arr2.toString())  //true
console.log(obj.name == obj2.name)  //true 表示在堆内存中name的值obj.name和obj2.name的值均为"andy"

什么是深浅拷贝

• 浅拷贝：赋值时，引用赋值，相当于取了一个别名。对其中一个修改，会影响另一个
• 深拷贝：赋值时值完全复制，完全的copy，对其中一个作出改变，不会影响另一个（会开辟一个新的内存空间存放真实值）
• 一般深浅拷贝都是针对于引用类型的

对基本类型来说，复制一个变量值，name2会指向name1的值，但是为name2赋值为Bob时，name2会在栈内存里找是否有Bob，如果有则指向他，没有就新增一个内存空间赋值为Bob，一个变量的改变不会影响另一个；

let name1 = "Andy";
let name2 = name1;
name1 == name2; // ture
name2 = 'Bob' // 目前栈中没有Bob 所以会新增一个Bob

栈区
name1	Andy
name2

栈区
name1	Andy
name2	Bob

对引用对象来说，直接赋值会使两个变量的引用地址指向同一个，当一个值改变时，会影响到另一个

let obj = {name: 'Andy'};
let obj2 = obj;

栈区		堆区
obj	引用地址1	name	Andy
obj2

浅拷贝

引用对象的浅拷贝：
注意 Object.assign()是浅拷贝
slice、concat、ES6的…扩展符均为浅拷贝（在子项中有引用类型的情况下），下面根据assign来举例

let obj = {};
let obj1 = obj;

// Object.assign()是浅拷贝，注意如果obj的属性值均为基本类型时，assign可以当作是深拷贝，但是如果属性值出现引用类型则为浅拷贝，所以严格意义上来说，assign是浅拷贝
let obj = {
	name: 'Andy',
	item: {
		apple: 1,
		orenge: 2
	}
}
let obj2 = Object.assign({}, obj)
obj2.item.apple = 2
obj2.name = 'Bob'
console.log(obj) // {name: 'Andy', item: {apple: 2, orenge: 2}}

深拷贝

1、我常用的一种深拷贝的方法是使用JSON，缺点是无法对function进行操作

• JSON.stringify(value[, replacer[, space]]): 将 JavaScript 对象转换为字符串
• JSON.parse(text[, reviver]) ：方法用于将一个 JSON 字符串转换为对象。(会在堆内存开辟一个新的空间存放这个对象)

let arr = [1,2, {name: 'andy'}];
let arr1 = JSON.parse(JSON.stringify(arr));
arr1[2].name = 'bob';
console.log(arr) // [1,2, {name: 'andy'}]
console.log(arr1) //[1,2, {name: 'bob'}]

2、通过遍历对象对子项赋值来进行深拷贝(一定要考虑到对象中有引用对象的情况)