首页 > 编程语言 >在JavaScript中,最高效的方法来深度克隆一个对象是什么?

在JavaScript中,最高效的方法来深度克隆一个对象是什么?

时间:2023-10-11 23:23:22浏览次数:39  
标签:高效 克隆 对象 clone JavaScript JSON 深度

内容来自 DOC https://q.houxu6.top/?s=在JavaScript中,最高效的方法来深度克隆一个对象是什么?

将JavaScript对象进行深度克隆的最有效方法是什么?我见过使用obj = eval(uneval(o));,但这是非标准的做法,仅被Firefox支持

我曾尝试过obj = JSON.parse(JSON.stringify(o));,但对效率有所质疑。

我还看到过各种缺陷的递归复制函数。

我很惊讶居然没有标准的解决方法。


原生深度克隆

现在有一个名为"结构化克隆"的JavaScript标准,它实验性地在Node 11及更高版本中可用,将登陆浏览器,并且已经有了现有系统的polyfills

structuredClone(value)

如果需要,先加载polyfill:

import structuredClone from '@ungap/structured-clone';

有关更多详细信息,请参阅此答案。

旧答案

带有数据丢失的快速克隆 - JSON.parse/stringify

如果你的对象中不包含Date、函数、undefinedInfinity、RegExps、Maps、Sets、Blobs、FileLists、ImageDatas、稀疏数组、类型化数组或其他复杂类型,那么一个简单的一行代码就可以深度克隆一个对象:

JSON.parse(JSON.stringify(object))

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
  re: /.\*/,  // lost
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

有关基准测试,请参阅Corban的答案。

使用库可靠地进行克隆

由于克隆对象并不简单(复杂类型、循环引用、函数等),因此大多数主要库都提供了克隆对象的函数。不要重新发明轮子 - 如果你已经在使用一个提供深度克隆函数的库,请检查它是否有对象克隆函数。例如,

  • lodash - cloneDeep;可以通过单独导入lodash.clonedeep模块并可能是你最好的选择,如果你还没有使用提供深度克隆函数的库。
  • AngularJS - angular.copy
  • jQuery - jQuery.extend(true, { }, oldObject).clone()只克隆DOM元素
  • just library - just-clone;是一个库的组成部分,具有零依赖性,只做一件事。
    适用于任何场合的免罪实用工具。

标签:高效,克隆,对象,clone,JavaScript,JSON,深度
From: https://www.cnblogs.com/xiaomandujia/p/17758489.html

相关文章

  • JavaScript Library – YouTube Embedded、YouTube Player API、YouTube Data API
    YouTube EmbedVideo参考: Embedvideos&playlists它和 GoogleMapsEmbed 类似,是通过iframe完成的。<iframewidth="800"style="aspect-ratio:16/9"src="https://www.youtube.com/embed/vEZCoe9GJFk"title="粉色海洋"......
  • 【leach协议】基于粒子群算法改进能量均衡高效WSN的LEACH协议附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • 深入浅出JavaScript闭包
    什么是JS闭包?JS闭包是一个难点也是JS的特色,是JS的高级特性。首先我们知道JS运行函数的时候会在内存中开辟一个存储空间,会把函数体内的代码当作字符串一摸一样的放在这个空间中,把这个空间地址赋值给函数名(变量名),当我们调用函数的时候会根据地址找到这个储存空间,然后执行储存空......
  • JavaScript :全局对象
    全局对象是一个常规的JavaScript对象,具有非常重要的用途:该对象的属性是全局定义的标识符,可供JavaScript解释器启动(或每当Web浏览器加载新页面时)使用,它会创建一个新的全局对象对象并为其提供一组初始属性,这些属性定义:全局常量,例如undefined、infinity和NaN。全局函数,如isN......
  • JavaScript之正则表达式
    正则表达式(RegExp)正则表达式不是JS独有的内容,大部分语言都支持正则表达式JS中正则表达式使用得不是那么多,我们可以尽量避免使用正则表达式在JS中,正则表达式就是RegExp对象,RegExp对象用于将文本与一个模式匹配正则表达式(regularexpressions,规则表达式)正则表达式用来定......
  • Go方法特性详解:简单性和高效性的充分体现
    本文深入探讨了Go语言中方法的各个方面,包括基础概念、定义与声明、特性、实战应用以及性能考量。文章充满技术深度,通过实例和代码演示,力图帮助读者全面理解Go方法的设计哲学和最佳实践。关注【TechLeadCloud】,分享互联网架构、云服务技术的全维度知识。作者拥有10+年互联网服......
  • 盘点KendoReact五大功能,让JavaScript数据网格构建更轻松!
    在本文中,我们将为大家分享KendoReact DataGrid中最受欢迎的五大功能:性能、数据组织、列和行交互、编辑自定义以及导出。有了这些功能,开发者大可不必从头开始构建JavaScript数据网格了!KendoUI是带有jQuery、Angular、React和Vue库的JavaScriptUI组件的最终集合,无论选择哪种Jav......
  • 如何在JavaScript中验证电子邮件地址?
    内容来自DOChttps://q.houxu6.top/?s=如何在JavaScript中验证电子邮件地址?我想在将用户输入发送到服务器或尝试向其发送电子邮件之前,在JavaScript中检查它是否是电子邮件地址,以防止最基本的拼写错误。我该如何实现?使用正则表达式可能是在JavaScript中验证电子邮件地址的最......
  • 在JavaScript中,如何替换所有出现的字符串?
    内容来自DOChttps://q.houxu6.top/?s=在JavaScript中,如何替换所有出现的字符串?给定一个字符串:s="Testabctesttestabctesttesttestabctesttestabc";这似乎只删除了上面字符串中的第一个abc:s=s.replace('abc','');如何替换所有的它的出现?在大多数流......
  • 详解如何通过JavaScript实现函数重载
    有的同学在开发中可能遇到过一个困扰,但是很少有人去解决这个问题,我这用一个例子展现出来constsearcher={};searcher.findAll=()=>{console.log("查询所有用户");};searcher.findByName=(name)=>{console.log("按照用户名称查询");};searcher.findByFirstN......