JS中的深浅拷贝，让你清晰理解数据传递的本质！
2024-01-03 01:37:23
在JavaScript的世界里，深浅拷贝是数据操作中绕不开的话题。理解深浅拷贝，才能真正掌握数据传递的本质，从而避免在开发过程中陷入各种难以捉摸的陷阱。本文将带领大家从基本数据类型和引用数据类型的概念入手，剖析赋值操作对两种类型数据的影响，揭示浅拷贝和深拷贝的本质区别，并通过形象的实例演示了深浅拷贝的不同之处。此外，还提供了一些巧妙的技巧来实现深拷贝，帮助开发人员更轻松地处理复杂数据的拷贝操作。
一、浅拷贝与深拷贝的本质差异
- 基本数据类型与引用数据类型
在JavaScript中，数据类型分为基本数据类型和引用数据类型。基本数据类型包括数字、字符串、布尔值、null和undefined，它们的值是直接存储在内存中的，因此在进行赋值操作时，是将值本身进行拷贝。而引用数据类型包括数组、对象、函数等，它们的值是存储在内存中的地址，因此在进行赋值操作时，只是将地址进行拷贝，而不是值本身。
- 浅拷贝
浅拷贝是指只拷贝一层数据结构，即只拷贝基本数据类型的值或引用数据类型的地址，而不拷贝引用数据类型所引用的实际数据。因此，浅拷贝后的变量与原始变量指向同一块内存地址，对浅拷贝变量的修改会影响原始变量。
- 深拷贝
深拷贝是指完全拷贝数据结构，即不仅拷贝基本数据类型的值或引用数据类型的地址，还拷贝引用数据类型所引用的实际数据。因此，深拷贝后的变量与原始变量指向不同的内存地址，对深拷贝变量的修改不会影响原始变量。
二、浅拷贝与深拷贝的实例演示
为了更加直观地理解浅拷贝与深拷贝的区别，我们通过一个简单的实例来演示。假设我们有一个数组arr，其中包含两个元素：数字1和数组[2, 3]。
- 浅拷贝
let arr = [1, [2, 3]];
let shallowCopyArr = arr;
shallowCopyArr[1][0] = 4;
console.log(arr); // [1, [4, 3]]
在这个例子中，我们对shallowCopyArr的元素[1][0]进行了修改，结果发现arr也被修改了。这是因为浅拷贝只拷贝了数组arr的地址，而没有拷贝数组arr所引用的实际数据。因此，对shallowCopyArr的修改也会影响arr。
- 深拷贝
let arr = [1, [2, 3]];
let deepCopyArr = JSON.parse(JSON.stringify(arr));
deepCopyArr[1][0] = 4;
console.log(arr); // [1, [2, 3]]
在这个例子中，我们对deepCopyArr的元素[1][0]进行了修改，结果发现arr没有被修改。这是因为深拷贝不仅拷贝了数组arr的地址，还拷贝了数组arr所引用的实际数据。因此，对deepCopyArr的修改不会影响arr。
三、实现深拷贝的技巧
在实际开发中，我们经常需要对复杂的数据结构进行深拷贝操作。以下是一些常用的实现深拷贝的技巧：
JSON.parse(JSON.stringify())
JSON.stringify()可以将一个对象转换成JSON字符串，JSON.parse()可以将JSON字符串转换成一个对象。利用这两个方法，我们可以实现深拷贝。
- 递归拷贝
对于嵌套的数据结构，我们可以使用递归的方式来实现深拷贝。具体来说，对于数组，我们可以递归地拷贝每个元素；对于对象，我们可以递归地拷贝每个属性的值。
- 使用库
有一些库可以帮助我们实现深拷贝，比如lodash、ramda等。这些库提供了丰富的深拷贝方法，我们可以直接使用。
四、总结
深浅拷贝是JavaScript开发中非常重要的知识，理解深浅拷贝，才能真正掌握数据传递的本质，从而避免在开发过程中陷入各种难以捉摸的陷阱。本文从基本数据类型和引用数据类型的概念入手，剖析了赋值操作对两种类型数据的影响，揭示了浅拷贝和深拷贝的本质区别，并通过形象的实例演示了深浅拷贝的不同之处。此外，还提供了一些巧妙的技巧来实现深拷贝，帮助开发人员更轻松地处理复杂数据的拷贝操作。希望这篇文章对您有所帮助，如果您有任何问题或建议，欢迎在评论区留言。
