一、JS中数据的存储形式-堆栈
我们先简单理解一下堆栈分别是啥：
什么是栈：计算机为原始类型开辟的一块内存空间 string number ...
什么是堆：计算机为引用类型开辟的一块内存空间 object
我们分别分析下面两段代码：
var a = 'jack' var b = a b = 'andy' console.log(a,b);//jack andy
var c = {key : 1}
var d = c
d.key = 2
console.log(c,d);//{ key: 2 } { key: 2 }看完之后我们可能有这么一个疑问，第一段代码很好理解，但是第二段代码里改变的明明是d中的key，为啥c里的key也改变了呢？
这里就是因为堆跟栈的原理，我们在定义原始类型数据的时候都会开辟一个栈的空间，当声明一个基本变量时，它就会被存储到栈内存中，而当其发生复制时，会把对应内存中的数据复制一份到新内存中，所以这两个变量之间没有什么联系。如果我们对引用类型进行复制，我们只是将地址复制了一遍，原变量和复制的新变量都是指向同一个地址，这就说明对新变量进行修改时就会影响到原变量的值。
二、深浅拷贝的三种方式
- 遍历赋值
- Object.create()
- JSON.parse()和JSON.stringify()
深拷贝与浅拷贝，简单点来说：
就是假设B赋值了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝。如果B没变，那就是深拷贝。
遍历赋值
下面我们看一段代码：
var obj = {
a:'hello',
b:{
a:'world',
b:111
},
c:[11,'jack','abdy']
}
function clone(obj) {
var objnew = {}
for(var i in obj) {
objnew[i] = obj[i]
}
return objnew
}
var objcopy = clone(obj)
console.log(obj);
console.log(objcopy);在这里我们定义了一个对象 obj，为了实现能够复制出另一个对象，我们再定义一个clone方法。然后调用这个方法，输出原来的对象和复制后的对象，看看是否相同：
在控制台下输出的两个结果没有任何差异，那他们两个是否真的完全一样呢？
他们两个是有不同的，因为这里的拷贝属于浅拷贝，我们根据浅拷贝的定义，如果在上例中，我们改变了objcopy，那么obj也发生了变化的话那他就是一个浅拷贝。
我们下面来验证一下，改变一下objcopy.b.a的值，看看 obj 里会不会发生相应的变化：
将objcopy.b.a赋值为字符串hhhh后，obj.b.a也变为了hhhh，这就说明我们最开始的拷贝属于浅拷贝。因为obj.b他是一个引用类型，所以objcopy.b和obj.b指向的都是同一个地址，这样不管objcopy.b.a改成什么，obj.b.a都会变成什么。
Object.create()
这种方法只需要行代码：
var objcopy = Object.create(obj)
obj在复制的时候，它会被当前对象复制到原型__proto__上，并不是复制到当前的对象上。我们再次改变一下objcopy.b.a的值，看看 obj 里会不会发生相应的变化：
所以他也是浅拷贝
遍历赋值实现深拷贝
这是深拷贝的克隆函数：
function deepclone(startobj,endobj) {
var obj = endobj || {}
for(var i in startobj)
{
if(typeof startobj[i] === 'object') {
obj[i] = startobj[i].constructor === Array ? [] : {}
deepclone(startobj[i],obj[i])
}else {
obj[i] = startobj[i]
}
}
return obj
}值得注意的一点是，在递归调用的时候，需要把当前处理的 obj[i] 给传回去，否则的话 每次递归obj都会被赋值为空对象，就会对已经克隆好的数据产生影响。
我们来验证一下是否是深拷贝：
var objcopy = deepclone(obj) objcopy.b.a = 'hhhh' console.log(obj); console.log(objcopy);
运行结果：
这就说明我们的深拷贝已经实现了。
通过JSON.parse()和JSON.stringify()实现深拷贝
这是我们在工作中最常见的一种方式
var objcopy = JSON.parse(JSON.stringify(obj))
我们对初始化的对象先通过JSON.stringify转换为字符串，再通过JSON.parse转回对象类型。
这样为什么能实现深拷贝的效果呢？因为我们通过 JSON.stringify 转成 string 类型后，他就存储在栈里，这样就不会出现地址值上的误会了，再通过JSON.parse就可以再转换为object类型。
到此这篇关于JavaScript深拷贝与浅拷贝原理深入探究的文章就介绍到这了,更多相关JS深拷贝与浅拷贝内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！