JavaScript深拷贝与浅拷贝
程序员文章站
2022-05-29 10:49:36
...
- 如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化
- ①如果B也跟着变了，说明这是浅拷贝，功力不够
- ②如果B没变，那就是深拷贝，自食其力，修成正果
- 接下来会分别阐述栈堆，基本数据类型与引用数据类型，这些概念能帮助理解深拷贝与浅拷贝
数据类型
- 基本数据类型：
- number，string，boolean，null，undefined
- 引用数据类型：
- array，object，函数
数据存储
基本类型–名值存储在栈
内存中，例如let a=1;
当b=a复制时，栈内存会新开辟一个内存，例如这样：
- 所以此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀硬了，不受a的影响了。当然，let
a=1,b=a;虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。
引用数据类型–名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，以上面浅拷贝的例子画个图：
引用数据类型–概念图
- 当a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。
- 要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了
深拷贝
- （1）slice()不带任何参数，默认返回一个长度和原数组相同的新数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*（1）slice()不带任何参数，默认返回一个长度和原数组相同的新数组*/
var x = [11, 22, 33, 44, 55, 66]
var y = x.slice();
x[0] = 1;
console.log(x)
console.log(y)
</script>
</html>
- （2）concat()不带任何参数，把返回数组和一个空数组合并后返回，即返回一个长度和原数组相同的新数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*（2）concat()不带任何参数，把返回数组和一个空数组合并后返回，即返回一个长度和原数组相同的新数组*/
var x = [11, 22, 33, 44, 55, 66]
var y = x.concat();
x[0] = 1;
console.log(x)
console.log(y)
</script>
</html>
- （3）直接遍历，添加到空数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*（3）直接遍历，添加到空数组*/
var x = [11, 22, 33, 44, 55, 66]
var y = [];
x.forEach(function(item, index, self) {
y.push(item)
})
x[0] = 1;
console.log(x)
console.log(y)
</script>
</html>
- （4）ES2015，ES6三点扩展运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*（4）ES2015，ES6三点扩展运算符*/
var x = [11, 22, 33, 44, 55, 66]
var [...y] = x;
x[0] = 1;
console.log(x)
console.log(y)
</script>
</html>
- 以上几种方法都实现了一级拷贝，为什么叫一级拷贝？
- 将上述案例，简单修改下，数据结构嵌套，做两层嵌套
- 验证后发现之前的几种方法只能拷贝一级数据，那如何拷贝所有层级呢？
- 接下来介绍两种常用的方案
- ①jquery的extend
- ②JSON的序列化和反序列化
（1）JQ的extend方法
- 语法：$.extend( [deep ], target, object )
- ①deep表示是否深拷贝，为true为深拷贝，为false为浅拷贝
- ②target目标对象，其他对象的成员属性将被附加到该对象
- ③object拷贝源对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*JQ的extend方法*/
var x = [11,[22,33,44], 55, 66]
var y = $.extend(true,[],x);
x[1][0] = 666;
console.log(x)
console.log(y)
</script>
</html>
（2）JSON的序列化和反序列化
- 语法：JSON.parse(JSON.stringify(XXXX))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深拷贝</title>
<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
<script type="text/javascript">
/*JSON的序列化和反序列化*/
var x = [11,[22,33,44], 55, 66]
var y = JSON.parse(JSON.stringify(x))
x[1][0] = 666;
console.log(x)
console.log(y)
</script>
</html>
- 实现原理：先将对象转为一个基本数据类型，再执行拷贝
深拷贝和浅拷贝的区别
- （1）浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
- （2）深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”
深拷贝相关
-
（1）为什么要使用深拷贝？
- 希望在改变新的数组（对象）的时候，不改变原数组（对象）
-
（2）怎么检验深拷贝成功？
- 改变任意一个新对象/数组中的属性/元素, 都不改变原对象/数组
以上就是深浅拷贝的见解，如有问题，请随时联系小编！