2025年js深拷贝和浅拷贝如何实现(js深拷贝与浅拷贝的区别)

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



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

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

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

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

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

  1. 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提供的各种拷贝机制,确保程序的健壮性。

编程小号
上一篇 2025-10-23 12:33
下一篇 2025-10-23 16:46

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ri-ji/9795.html