Js实现深拷贝的4种方式

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

概念

深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象;
浅拷贝:不在堆内存中重新开辟空间,只复制栈内存中的引用地址。
本质上两个对象(数组)依然指向同一块存储空间在这里插入代码片

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

//使用递归的方式实现数组、对象的深拷贝
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

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项目中使用,其他项目依然推荐是用递归函数)文章来源地址https://www.toymoban.com/news/detail-549569.html

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

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

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

相关文章

  • 在前端开发中,何时应该使用 jQuery,何时应该使用 Vue.js

    如果您是最近才开始进入 Web 前端开发领域的开发人员,那么您可能会听说过 jQuery。jQuery 是一个小巧而功能强大的 JavaScript 库,旨在简化跨浏览器 DOM 操作、事件处理、动画效果和 AJAX 等方面的操作,可以让开发人员更轻松地开发出高质量的网站和 Web 应用程序。 何时应该使

    2024年02月02日
    浏览(51)
  • 前端面试题(第三弹)——js对象的基本方法和深浅拷贝

    第一种 第二种 1.configurable:属性是否可以通过delete删除,默认值为true。 2.enumberable:属性是否可以通过for in 进行循环返回,默认值为true。 3.writable:属性是否可被修改,默认值为true。 4.value:属性实际的值,默认为undefined。 访问器属性有四个属性类型,也是使用Object.defin

    2024年02月13日
    浏览(47)
  • 【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件。语 法为: 第一个参数是 事件的类型 (如 “click”

    2024年01月19日
    浏览(45)
  • 深入探索前端之道:JavaScript深拷贝与浅拷贝的解析与实现

    前端开发中,数据的复制是一个常见的操作。尤其是在处理对象和数组时,我们需要考虑的是一个浅拷贝还是深拷贝。那么,什么是深拷贝和浅拷贝?它们在前端开发中有什么作用?如何实现这两种拷贝?这是我们在本文将讨论的问题。 浅拷贝 浅拷贝是一种数据复制方式,

    2024年02月10日
    浏览(37)
  • 前端常见面试题之js基础(手写深拷贝、原型和原型链、作用域和闭包)

    值类型包括 :字符串(string)、数字(number)、布尔值(boolean)、undefined。 引用类型包括 :对象(object)、数组(array)、函数(function)和null。 二者的区别 当你将一个值类型赋给另一个变量时,会复制该值的副本。而当你将一个引用类型赋给另一个变量时,只会复制对

    2024年01月22日
    浏览(50)
  • js 实现深拷贝(全)

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

    2024年02月16日
    浏览(30)
  • 最详细!!!前端原神官网 (采用html+css+js+dom+ajax+jquery+swiper+json)完整版

    1.该项目采用了大部分前端知识, 完整的复刻原神官网上所显示的全内容 ,非常全面和详细。希望有兴趣的小伙伴萌可以看看和参考一下!!!该项目可以作为大学生 毕设项目(附带项目答辩ppt) 同时也可以作为计算机专业的小伙伴的 期末大作业 。喜欢的请留下你的足迹

    2024年02月05日
    浏览(64)
  • JavaScript之深度克隆、多种实现方式、列举各种方式的优缺点、对象自有属性、拷贝、复制

    在 JavaScript 中,对象和数组是引用类型,当将一个对象或数组赋值给另一个变量时,它们实际上是共享同一块内存空间。这意味着对一个对象或数组的修改会影响到所有引用它的变量。 为了创建一个独立的副本,可以使用深克隆。 JSON.stringify() 方法将 JavaScript 对象转换为一个

    2024年02月02日
    浏览(45)
  • JS实现深拷贝的4种方法

    本文主要给大家介绍了关于JS实现深拷贝的4种方式,深拷贝是指将一个对象完整地拷贝一份,不受原对象影响,文中通过示例代码介绍的非常详细,需要的朋友可以参考下 深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象; 浅拷贝:不在堆内存中重新开辟

    2024年02月04日
    浏览(36)
  • JS实现深拷贝的几种方法

    这是最简单的方法。 通过递归的方式深度遍历对象,将每个属性的值进行复制。需要处理被复制对象为值类型的情况以及属性值中包含对象的情况。需要注意的是,为了防止循环引用导致死循环,需要记录已经遍历过的对象。 Lodash Lodash 是一个一致性、模块化、高性能的 J

    2024年02月11日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包