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

js深拷贝一个对象(js深拷贝json parse)



您知道吗,JavaScript 现在有一种本地内置的方法可以进行对象的深层复制? 没错,这个  函数内置于 JavaScript 运行时中:

 
  

jsx

复制代码

您是否注意到在上面的示例中我们不仅复制了对象,还复制了嵌套数组,甚至 Date 对象?

一切都按照预期工作:

 
  

js

复制代码

没错,  不仅可以做到以上,还可以:

  • 克隆无限嵌套的对象和数组
  • 克隆循环引用
  • 克隆各种 JavaScript 类型,例如  、  、  、  、  、  、  、  、  等等
  • 转移任何可转移对象(Transfer any transferable objects )

例如,下边这种代码也会按预期工作:

 
  

js

复制代码

值得注意的是,我们正在谈论的是深拷贝。如果您只需要进行浅拷贝,即不拷贝嵌套对象或数组的副本,那么我们可以只进行对象展开:

 
  

jsx

复制代码

或者使用下边的任意一个方法

 
  

jsx

复制代码

但是一旦我们嵌套了内容,我们就会遇到麻烦:

 
  

jsx

复制代码

正如您所看到的,我们没有获得该对象的完整副本。

嵌套日期和数组仍然是两者之间的共享引用,如果我们想编辑那些认为我们只是更新复制的calendarEvent的内容,这可能会给我们带来重大问题

啊,是的,这是个常用的技巧,并且具有出色的性能,但有一些  可以解决的缺点。

以此为例:

 
  

jsx

复制代码

如果我们记录  ,我们会得到:

 
  

jsx

复制代码

这不是我们想要的!  应该是  对象,而不是字符串

发生这种情况是因为  只能处理基本对象、数组和原子类型。任何其他类型都可以以难以预测的方式处理。例如,日期被转换为字符串。而  只是转换为  。

 甚至完全忽略某些内容,例如  或函数。

例如,如果我们使用此方法复制  示例:

 
  

jsx

复制代码

会得到:

 
  

jsx

复制代码

哎,是的,我们必须删除最初为此使用的循环引用,因为  如果遇到其中之一,只会抛出错误。

目前,Lodash 的  函数已经是解决这个问题的一个非常常见的解决方案。

事实上,这确实按预期工作:

 
  

jsx

复制代码

但是,这里只有一个警告。根据我的 IDE 中的导入成本扩展,它会打印我导入的任何内容的 kb 成本,这个函数压缩后总共有 17.4kb(压缩后为 5.3kb):

假设您只导入该函数。如果您以更常见的方式导入,却没有意识到 Tree Shaking 并不总是按您希望的方式工作,您可能会意外地仅针对这一功能导入多达 25kb 的数据 

虽然这对任何人来说都不会是世界末日,但在我们的例子中根本没有必要,尤其是当浏览器已经内置  时。

函数不能被克隆

他们将抛出  异常:

 
  

jsx

复制代码

DOM 节点

还会抛出  异常:

 
  

jsx

复制代码

Property descriptors, setters, and getters

类似的类似元数据的功能也不会被克隆。

例如,使用 getter 时,会克隆结果值,但不会克隆 getter 函数本身(或任何其他属性元数据):

 
  

jsx

复制代码

Object prototypes

原型链不会被遍历或重复。因此,如果您克隆  的实例,则克隆的对象将不再被认为是此类的实例(但此类的所有有效属性都将被克隆)

 
  

jsx

复制代码

Full list of supported types

更简单地说,以下列表中未列出的任何内容都无法克隆:

, , , , ,  types (those specifically listed below),  ,  but only plain objects (e.g. from object literals), Primitive types, except  (aka , , , , , ), , , 

Error types 错误类型

, , ,  , , , 

Web/API types

, , , , , , , , , , , , , , , , , 

基本上所有主流浏览器都支持  ,甚至 Node.js 和 Deno。

请注意 Web Workers 的支持更有限的警告:

Source: MDN 来源:MDN

虽然已经等了很长时间了,但我们现在终于有了  来让 JavaScript 中的深度克隆对象变得轻而易举。

原文地址:Deep Cloning Objects in JavaScript, the Modern Way

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

版权声明


相关文章:

  • vuecli安装不成功(vuecli安装失败)2026-03-21 08:45:09
  • jvm内存模型1.7 1.8(jvm内存模型1.7和1.8的区别)2026-03-21 08:45:09
  • 安装vue报错(vue-cli安装不成功)2026-03-21 08:45:09
  • 数组方法(js数组方法)2026-03-21 08:45:09
  • vue安装(Vue安装脚手架)2026-03-21 08:45:09
  • redhat最新版下载(redhat6.9下载)2026-03-21 08:45:09
  • ubuntu16.04安装cmake(Ubuntu16.04安装显卡驱动)2026-03-21 08:45:09
  • plsql注册码在哪里填(plsql8.0注册码)2026-03-21 08:45:09
  • ubuntu一键换源(ubuntu20.10换源)2026-03-21 08:45:09
  • map转jsonobject报错(map转json不改变顺序)2026-03-21 08:45:09
  • 全屏图片