【JS】中深拷贝浅拷贝的区别和实现方式

最新推荐文章于 2024-08-23 20:55:13 发布

zlting~

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量218

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/sunshineTing2/article/details/131941961

版权

本文介绍了JavaScript中深拷贝和浅拷贝的概念，浅拷贝只复制第一层，而深拷贝会创建全新的对象副本。提到了实现浅拷贝的方法如Object.assign、扩展运算符和slice，以及深拷贝的实现方式，包括JSON.parse和JSON.stringify结合、递归拷贝以及使用Lodash库的_.cloneDeep方法。文章还指出了深拷贝在处理复杂对象时的注意事项和限制。

摘要由CSDN通过智能技术生成

1、概念

赋值不属于拷贝
JS的深拷贝浅拷贝主要作用于多层数组或对象中，其中：

浅拷贝：

只对第一层 数组或对象进行复制，其它层复制的是原存储的内存地址（修改其它深层级会影响原对象）

深拷贝：

构造一个新的复合数组或对象，每一层级 都在堆内存中开辟了新的空间，与原数组或对象互相不影响。

2、实现方式

浅拷贝的实现方式：

针对对象：使用 Object.assign() 方法，例如：let newObj = Object.assign({}, oldObj)；
针对数组或对象：使用扩展运算符（...）进行浅复制，例如：let newObj = {…oldObj}；let newArr = […oldArr]；
针对数组：使用数组的 slice() 方法进行浅复制，例如：let newArray = oldArray.slice()

深拷贝的实现方式

JSON.parse(JSON.stringfy(obj))
JSON.parse(JSON.stringify(obj))：将对象序列化为 JSON 字符串，再将字符串解析为新的对象。这种方式可以实现深拷贝，但有一些限制，例如无法复制函数、循环引用等不可序列化的属性；
手动递归拷贝：
使用递归的方式遍历对象的属性，逐一复制到新的对象中。这种方式可以实现深拷贝，但需要手动编写代码，并且不适用于嵌套层数较深的对象。

// 递归实现深拷贝
function deepClone(obj) {
 if (typeof obj !== 'object' || obj === null) {
   return obj;
 }
 let newObj = Array.isArray(obj) ? [] : {};
 for (let key in obj) {
   newObj[key] = deepClone(obj[key]);
 }
 return newObj;
}