当前位置:网站首页 > Vue.js开发 > 正文

js深拷贝对象的方法(js 深拷贝对象)




js中的对象深拷贝在项目开发中较常用到,本文介绍一下Js对象拷贝的几种实现方法,以及如何深拷贝。


浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是引用内存地址。可以称之为拷贝了,但没完全拷贝。

深拷贝是对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域来存放新对象,所以修改新对象不会影响原对象。如果不进行深拷贝,其中一个对象改变了浅拷贝所拷贝的引用值内部的属性,就会影响到另一个对象的属性值。

代码如下(示例):

 

此种方式可以深拷贝一个对象,但是这个对象的内容得符合一定的限制要求,才能真正的深拷贝而没有遗漏或拷贝偏差。下面列举这个方法的缺陷。

缺陷:

  1. 取不到值为 undefined 的 key;
  2. 如果对象里有函数,函数无法被拷贝下来;
  3. 无法拷贝 copyObj 对象原型链上的属性和方法;
  4. 对象转变为 date 字符串
  5. NaN 转变为 null。

JSON 本来就不是专门为深拷贝而设计出来的,该方法的原理就是将对象先转换为 JSON 字符串,再从 JSON 字符串解析回 JavaScript 对象。JSON 所能保存的类型有限,转换为 JSON 字符串的过程中会按照 JSON 的一些规则处理,而无法保留原对象的所有细节。所以,如果深拷贝的应用场景无法接受这些细节的丢失,则不要使用这种方式深拷贝。

代码如下(示例):

 

这种方式一种浅拷贝方法。它只会复制对象的第一层属性,而不会复制对象内部的所有嵌套属性。

Object.assign方法作用是将 targetObj 和 sourceObj 合并,返回值是合并后的 targetObj 的引用,而这个过程只进行了浅拷贝。

 

解决循环引用和symblo类型

 
 

初次调用deepCopy时,参数会创建一个WeakMap结构的对象,这种数据结构的特点之一是,存储键值对中的健必须是对象类型。

如果待拷贝对象中有属性也为对象时,则将该待拷贝对象存入weakMap中,此时的健是对该待拷贝对象的引用,值是拷贝结果对象的引用。然后递归调用该函数再次进入该函数,传入了上一个待拷贝对象的对象属性的引用和存储了上一个待拷贝对象引用的weakMap,因为如果是循环引用产生的闭环,那么这两个引用是指向相同的对象的,因此会进入if(hash.has())语句内,然后直接赋值return,退出函数,所以不会一直循环递归进栈,以此防止栈溢出。


上述的几种方式不管优缺点如何,共同点是只能拷贝对象的可枚举属性,对于不可枚举或者原型上的属性,却不能拷贝,但对于基本的使用来说,已经足够了。

到此这篇js深拷贝对象的方法(js 深拷贝对象)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • dos2unix安装包(如何安装dos6.22)2025-04-30 08:27:07
  • cjson(CJSON遍历json所有节点)2025-04-30 08:27:07
  • 27930报文解析(376.1报文解析)2025-04-30 08:27:07
  • vue2关闭eslint(vue 关闭eslint)2025-04-30 08:27:07
  • 跨域解决方案js(nginx跨域解决方案)2025-04-30 08:27:07
  • 多级列表3.1怎么设置(多级列表1.1怎么设置)2025-04-30 08:27:07
  • 跨域解决方案js(跨域解决方案jsonp)2025-04-30 08:27:07
  • 埋点前端vue(前端埋点插件)2025-04-30 08:27:07
  • vue 怎么安装(vue怎么安装环境)2025-04-30 08:27:07
  • swagger2.0返回值为hashmap(hashmap get方法返回值)2025-04-30 08:27:07
  • 全屏图片