JS实现深拷贝的4种方法

这篇具有很好参考价值的文章主要介绍了JS实现深拷贝的4种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

js 深拷贝,编程语言,JavaScript,javascript,开发语言,ecmascript

本文主要给大家介绍了关于JS实现深拷贝的4种方式,深拷贝是指将一个对象完整地拷贝一份,不受原对象影响,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

概念

深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象;

浅拷贝:不在堆内存中重新开辟空间,只复制栈内存中的引用地址。

本质上两个对象(数组)依然指向同一块存储空间在这里插入代码片

1、递归方式(推荐,项目中最安全最常用)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//使用递归的方式实现数组、对象的深拷贝

export function deepClone (obj) {

    let objClone = Array.isArray(obj) ? [] : {};

    if (obj && typeof obj === "object") {

        for (var key in obj) {

            if (obj.hasOwnProperty(key)) {

                //判断ojb子元素是否为对象,如果是,递归复制

                if (obj[key] && typeof obj[key] === "object") {

                    objClone[key] = deepClone(obj[key]);

                } else {

                    //如果不是,简单复制

                    objClone[key] = obj[key];

                }

            }

        }

    }

    return objClone;

};

2、JSON.stringify() ;(这个不推荐使用,有坑)

普通的对象也可以进行深拷贝,但是!!!当对象内容项为number,string.boolean的时候,是没有什么问题的。但是,如果对象内容项为undefined,null,Date,RegExp,function,error的时候。使用JSON.parse(JSON.stringify())进行拷贝就会出问题了。

3、使用第三方库lodash中的cloneDeep()方法

是否推荐使用,看情况吧。如果我们的项目中只需要一个深拷贝的功能,这种情况下为了一个功能引入整个第三方库就显得很不值得了。不如写一个递归函数对于项目来说性能更好

实际上,lodash.cloneDeep()方法底层使用的本来就是递归方法。只是在外层又封装了一层cloneDeep的主体函数baseClone。

所以,如果不是原先项目中有使用 lodash 这个库的话,大可不必为了这一个功能而去引入它。

4、jquery的extend()方法进行深拷贝(推荐在JQ中使用)

这个方法仅适用于JQuery构建的项目。JQuery自身携带的extend

1

2

3

let obj = { a: { c: 2, d: [1, 3, 5], e: "哇哇哇" }, b: 4 };

let newObj = $.extend(true, {}, obj1);

 //拷贝完成obj.b = 20;console.log(newObj.b); //输出 4

总结:

进行深拷贝的方法:

递归函数 (推荐使用,项目中使用的更多,更小,更安全)

JSON.stringify() 和JSON.parse() ; (不推荐使用,如果遇到Function,Date等类型的变量容易出现一些意料之外的问题)

第三方库lodash的cloneDeep()方法

JQuery的extend()函数 (推荐在JQuery项目中使用,其他项目依然推荐是用递归函数)

到此这篇关于JS实现深拷贝的4种方式的文章就介绍到这了,希望可以帮到你!

来源:微点阅读   https://www.weidianyuedu.com文章来源地址https://www.toymoban.com/news/detail-756658.html

到了这里,关于JS实现深拷贝的4种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 快速认识,前端必学编程语言:JavaScript

    JavaScript是构建Web应用必学的一门编程语言,也是最受开发者欢迎的热门语言之一。所以,如果您还不知道JavaScript的用处、特点的话,赶紧补充一下这块基础知识。 JavaScript 是一种高级、单线程、垃圾收集、解释或即时编译、基于原型、多范式、动态语言,具有非阻塞事件循

    2024年02月05日
    浏览(52)
  • 我心中的TOP1编程语言—JavaScript

    作为一名研发工程师(程序员),平时工作中肯定会接触或了解很多编程语言。每个人都会有自己工作中常用的语言,也会有偏爱的一些编程语言。而我心中的最爱,毫无疑问,就是 JavaScript。 JavaScript 是一门编程语言,可为网站添加交互功能(例如:游戏、动态样式、动画

    2024年02月11日
    浏览(89)
  • 从零开始学习JavaScript:轻松掌握编程语言的核心技能⑤

    🏘️🏘️个人简介:以山河作礼。 🎖️🎖️: Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主 🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读! 📑📑 在 JavaScript 中,函数可以通过 function 来定义 。 📌 函数定义的一般语法如下: 其中,

    2024年02月08日
    浏览(71)
  • 从零开始学习JavaScript:轻松掌握编程语言的核心技能①

    🏘️🏘️个人简介:以山河作礼。 🎖️🎖️: Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主 🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读! 📜📜 JavaScript 是一种脚本语言,用于在 Web 页面上执行交互式操作和动态效果 。它最初由 Brendan

    2024年02月07日
    浏览(71)
  • 从零开始学习JavaScript:轻松掌握编程语言的核心技能③

    🏘️🏘️个人简介:以山河作礼。 🎖️🎖️: Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主 🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读! 📑📑 JavaScript中的if…else语句是一种条件语句,用于在满足特定条件时执行不同的代码块 。 📌

    2024年02月08日
    浏览(71)
  • 从零开始学习JavaScript:轻松掌握编程语言的核心技能④

    🏘️🏘️个人简介:以山河作礼。 🎖️🎖️: Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主 🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读! 📌 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单数据经常需

    2024年02月08日
    浏览(58)
  • 从零开始学习JavaScript:轻松掌握编程语言的核心技能②

    🏘️🏘️个人简介:以山河作礼。 🎖️🎖️: Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主 🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读! 📜 📜 JavaScript 函数是一段可以被重复调用的代码块。它可以接收输入参数,处理这些参数,然后返

    2024年02月08日
    浏览(71)
  • 不同编程语言下CH347DLL的调用方法

            CH347为一款USB转JTAG/SPI/IIC/GPIO/UART接口的转换芯片,此处总结一下开发时所遇到的在C/C++、Python、C#下调用CH347DLL的方法,若有其他需要补充的也可一起交流。         基于WCH官方Demo板做的代码验证。         可参考WCH官网CH347EVT/Tools下工程代码,此处则不再重复    

    2024年02月16日
    浏览(38)
  • 5 种编程语言实现春节快乐

    经典:C语言实现春节快乐,应该没人看不懂叭 源代码演示:  编译运行结果如下: 是不是人人都能看懂的春节快乐,此外还提供了其他语言的春节快乐 C++实现春节快乐 源代码演示: 编译运行结果如下: C#实现春节快乐 源代码演示: 编译运行结果如下: Java实现春节快乐:

    2024年02月03日
    浏览(34)
  • js 实现深拷贝(全)

    使用 lodash 的 cloneDeep() 方法(详情可见 lodash 中文官网) 除了基本数据类型( null、string、boolean、undefined、number、symbol ),引用数据类型中 如果对象中不存在时间类型和正则表达式等类型对象,则可用简单的JSON序列化进行转化。 注意:如果对象内容项为undefined,null,Date,Reg

    2024年02月16日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包