js深拷贝和浅拷贝如何实现（js深拷贝与浅拷贝的区别）



在JavaScript编程中，数据的复制是一个基础而又至关重要的概念，尤其在处理复杂的数据结构时，正确地执行拷贝操作可以避免意料之外的数据修改问题。JavaScript中的数据类型分为基本类型（如number、string、boolean等）和引用类型（如object、array、function等）。基本类型的值存储的是值本身，而引用类型存储的是指向该数据在内存中位置的引用。因此，对于引用类型而言，拷贝操作分为浅拷贝（Shallow Copy）和深拷贝（Deep Copy）两种情况。

浅拷贝创建一个新的对象或数组，但它仅复制第一层的元素或属性，如果这些元素或属性是引用类型，则新旧对象将共享同一份引用。这意味着对拷贝后对象中引用类型属性的修改会影响到原对象。以下是一些实现浅拷贝的方法：

1. Object.create: 虽然主要用于实现原型继承，但它也可以视为一种特殊的浅拷贝，新对象的原型被设置为原对象。

2. Object.assign: 将源对象的可枚举属性复制到目标对象，适合合并多个对象。

3. Array的concat、slice、解构赋值: 如、、，这三个方法都会返回一个新的数组，通过与空数组连接，对数组从0开始分割，将数组解构重新赋值，都是对数组进行浅拷贝。

4. Array的toReversed().reverse(): 会将原数组倒序后返回一个新的数组，通过先反转再反转数组来实现浅拷贝，非直观但有效。

手搓浅拷贝

自定义的函数通常会使用循环遍历对象的属性，并利用检查属性是否属于对象本身，然后简单地复制这些属性到新对象中，不涉及深层次的递归。

深拷贝不仅复制第一层的元素或属性，还会递归地复制所有层级的嵌套对象，确保原对象与拷贝对象之间完全独立，互不影响。深拷贝在需要完全隔离数据时非常关键。以下是几种常见的深拷贝方法：

JSON.parse(JSON.stringify(obj))

1. 无法识别BigInt类型：当对象中包含BigInt类型的值时，这个方法会将其转换为字符串，因为JSON标准不支持BigInt类型。因此，复制后的对象中的BigInt值不再是BigInt，而是字符串。
2. 无法拷贝、、属性：
   • 的属性值会被忽略，因为它不是JSON格式的一部分。
   • 函数（）作为对象的属性不能被序列化，所以在解析后会丢失。
   • 作为键或值同样不会被处理，因为JSON.stringify会忽略Symbol类型的键，且Symbol值也不能被直接序列化。
3. 无法处理循环引用：如果对象结构中存在循环引用（即对象A的某个属性引用了对象B，同时对象B的某个属性又引用了对象A），会抛出错误，因为它无法正确地序列化这样的结构。

structuredClone(obj)

是一个较新的API（在某些现代浏览器和Node.js中可用），它能完美地克隆大多数值，包括循环引用，但兼容性需考虑。

自定义deepCopy函数

实现一个深拷贝函数通常需要递归地检查每个属性，如果属性值是对象，则递归调用自身进行拷贝；否则，直接复制该属性值。这种方法灵活性高，可以处理更多特殊情况，但实现相对复杂。

选择浅拷贝还是深拷贝，取决于具体的应用场景。如果数据结构简单，或者只需要复制顶层结构，浅拷贝提供了简洁高效的解决方案。而对于复杂的数据结构，特别是当内部包含多层嵌套或特殊类型的属性时，深拷贝能够确保数据的完整性和独立性。开发者应根据实际需求，权衡拷贝的深度与性能开销，灵活运用JavaScript提供的各种拷贝机制，确保程序的健壮性。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/45721.html