之前，我们讲过js的数据类型与堆内存、栈内存以及数据类型，了解该知识点以后，我们来进一步学习 浅拷贝与深拷贝。
在学习 浅拷贝与深拷贝之前，我们先学习下数据类型的复制。
1.基本数据类型的复制
let a = 20;
let b = a;
b = 30;
console.log(a); //20
在这个例子中，a、b 都是基本类型，它们的值是存储在栈内存中的，a、b 分别有各自独立的栈空间， 所以修改了 b 的值以后，a 的值并不会发生变化。
从下图可以清晰的看到变量是如何复制并修改的。
20190711170939.png
2.引用数据类型的复制
let m = { a: 10, b: 20 };
let n = m;
n.a = 15;
console.log(m.a) //15
在这个例子中，m、n都是引用类型，栈内存中存放地址指向堆内存中的对象，引用类型的复制会为新的变量自动分配一个新的值保存在变量中，但只是引用类型的一个地址指针而已，实际指向的是同一个对象，所以修改 n.a 的值后，相应的 m.a 也就发生了改变。
从下图可以清晰的看到变量是如何复制并修改的。
20190711171116.png
由于引用类型的复制存在指向同一对象的问题，所以为了解决该问题（即使其不指向同一对象），出现了浅拷贝与深拷贝
3.浅拷贝与深拷贝特点
- 深拷贝和浅拷贝是只针对引用数据类型（Object、Array、Function）
- 深拷贝和浅拷贝的目的：解决引用数据类型数据栈中内存都指向同一个堆内存的问题。（即复制出一个和原引用类型相同的值，但是两个都有独立的内存空间）
4.浅拷贝
let m = {
a: 10,
b: 20,
c: ['小王', '小明']
};
let n = m;
n.a = 15;
n.c[0]='隔壁老王'
console.log(m===n) //true
console.log(m,n)
打印m，n的结果相同，如下
{
a:15,
b: 20,
c: ['隔壁老王', '小明']
}
至于为什么改变，我们上面已经解释（指向同一堆内存），现在我们进行浅拷贝处理，更改代码如下：
//定义浅拷贝方法
function shallowCopy(object) {
var map = {};
for (var i in object) {
map[i] = object[i];
}
return map;
}
let m = {
a: 10,
b: 20,
c: ['小王', '小明']
};
let n = shallowCopy(m);
n.a = 15;
n.c[0]='隔壁老王'
console.log(m===n) //false
console.log(m,n)
打印m，n的结果相同，如下
//m
{
a: 10,
b: 20,
c: ['隔壁老王', '小明']
}
//n
{
a: 15,
b: 20,
c: ['隔壁老王', '小明']
}
通过浅拷贝处理后，我们可以看见，
- 第一层数据为基本数据类型（即只有一层的时候），改变复制的变量值，不会使原数据改变（即堆中重新开辟一块内存，而不是之前的指向同一内存）
- 第一层数据为引用数据类型（即有多层的时候），改变复制的变量值，仍会使原数据改变（即仍指向同一内存）
所以，浅拷贝指的是：对一层的数据进行拷贝，如果对每层数据都进行拷贝，就是深拷贝。
4.深拷贝
所以实现深度克隆原理就是：如果遇到多层引用类型，对引用类型再重复浅拷贝，直到里边都是基本数据类型。因为给每一个节点都做了拷贝,会浪费内存
我们更改上面浅拷贝的方法如下：
//定义检测数据类型的功能函数，不能使用typeof方法， 因为该方法无法检测数组和对象（都为object）
function checkedType(target) {
return Object.prototype.toString.call(target).slice(8, -1)
}
//实现深度克隆---对象/数组
function clone(target) {
//判断拷贝的数据类型
//初始化变量result 成为最终克隆的数据
let result, targetType = checkedType(target)
if (targetType === 'Object') {
result = {}
} else if (targetType === 'Array') {
result = []
} else {
return target
}
//遍历目标数据
for (let i in target) {
//获取遍历数据结构的每一项值。
let value = target[i]
//判断目标结构里的每一值是否存在对象/数组
if (checkedType(value) === 'Object' ||checkedType(value) === 'Array') { //对象/数组里嵌套了对象/数组
//继续遍历获取到value值
result[i] = clone(value)
} else { //获取到value值是基本的数据类型或者是函数。
result[i] = value;
}
}
return result
}
我们可以用同样的例子测试下：结果打印m，n如下：
//m
{
a: 10,
b: 20,
c: ['小王', '小明']
}
//n
{
a: 15,
b: 20,
c: ['隔壁老王', '小明']
}
5.Object.assign()
Object.assign()只能进行浅拷贝（即只能拷贝一层）
6.JSON.parse(JSON.stringify())
let m = {
a: 10,
b: 20,
c: ['小王', '小明']
};
let n = JSON.parse(JSON.stringify(m));
n.a = 15;
n.c[0]='隔壁老王'
console.log(m, n)
我们可以用同样的例子测试下：结果打印m，n如下：
//m
{
a: 10,
b: 20,
c: ['小王', '小明']
}
//n
{
a: 15,
b: 20,
c: ['隔壁老王', '小明']
}
原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。
但这种方法虽然可以实现数组或对象深拷贝,但不能处理函数，我们更改代码如下：
let m = {
a: 10,
b: function(){
console.log(1);
},
c: ['小王', '小明'],
};
let n = JSON.parse(JSON.stringify(m));
n.a = 15;
console.log(m, n)
打印结果如下：
20190712144500.png
我们发现，我们在进行深拷贝时候，如下里面有函数，会自动被剔除掉。这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数。
6.lodash的cloneDeep
该函数库也有提供_.cloneDeep用来做深拷贝，里面是进行性能优化过的方案，工作中可以使用此方法进行深拷贝。
网友评论