js对象深复制/深拷贝功能函数封装

【JS专栏】JS对象的浅拷贝与深拷贝 浅拷贝 自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。 ​ 1. object.assign object.assign 是 ES6 中 object 的一个方法,该方法可以用于JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。 该方法的第一个参数是拷贝的目标对象,后面的参数是拷贝的来源对象(也可以是多个来源)。 阅读详情

js对象深复制封装(深拷贝)

深复制,及源对象的属性如果有对象,该对象属性修改后,不会引起复制后的对象各属性的改变,

源对象的任何属性及子属性与新对象的直接没有任何引用关系。

一下例举几种浅复制常见方法:

        for(var prop in obj){
             // 浅复制
         }

         Object.assign();//浅复制

         var obj1={...obj};//浅复制 如果原obj1就存在,还会改变原obj1的引用地址

         var obj1=JSON.parse(JSON.stringify(obj));

直接上代码(深复制):

原理无非用obj.hasOwnProperty(key)来判断属性,再利用递归往复判断已达到对象深复制。

   function cloneObject(sourceObj, targetObj) {
            // targetObj=targetObj || {};
            if (!targetObj) {
                // sourceObj.constructor就是 sourceObj的类型
                // sourceObj是数组  sourceObj.constructor->Array   new Array();
                targetObj=new sourceObj.constructor();
                switch (sourceObj.constructor) {
                    case RegExp:
                        //复制正则
                        targetObj=new RegExp(sourceObj.source,sourceObj.flags);
                        break;
                    case Date:
                        //复制日期
                        targetObj=new Date(sourceObj);
                        break;
                        //.......
                }
            }

            
            var names = Object.getOwnPropertyNames(sourceObj);
            for (var i = 0; i < names.length; i++) {
                // console.log(names[i],sourceObj[names[i]]);
                // console.log(typeof sourceObj[names[i]]);
                var desc = Object.getOwnPropertyDescriptor(sourceObj, names[i]);
                if (typeof desc.value === "object") {
                    var o = cloneObject(desc.value);
                    Object.defineProperty(targetObj, names[i], {
                        enumerable: desc.enumerable,
                        configurable: desc.configurable,
                        writable: desc.writable,
                        value: o
                    });
                } else if (typeof desc.value === "function") {
                    var fnStr = desc.value.toString().replace(/\n/g, "");
                    var arg = fnStr.match(/\((.*?)\)/)[1];
                    var content = fnStr.match(/{(.*)}/)[1];
                    var fn = new Function(arg, content);
                    Object.defineProperty(targetObj, names[i], {
                        enumerable: desc.enumerable,
                        configurable: desc.configurable,
                        writable: desc.writable,
                        value: fn
                    });
                } else {
                    Object.defineProperty(targetObj, names[i], desc);
                }
            }
            return targetObj;
        }
JS中的浅拷贝与深拷贝方法(秒懂拷贝原理与手写深拷贝) 换句话说,新对象和原对象的所有属性,包括引用类型属性,在内存中都是完全独立的。需要注意的是,浅拷贝和深拷贝只针对引用类型的属性,对于原始类型的属性,复制的都是值。浅拷贝是指创建一个新对象,然后将原对象的引用类型的属性复制给新对象。当对象中包含嵌套的子对象,且需要确保复制后的对象完全独立于原始对象时,应使用深拷贝。如果只需要复制对象的部分属性,可以使用浅拷贝来复制所需的属性,而不必复制整个对象。如果需要复制对象的所有子对象,而不仅仅是第一层的属性,应使用深拷贝。操作七:深拷贝中的循环引用。 阅读详情

相关推荐

STM32+4G模块+MQTT协议:从零构建稳定可靠的物联网通讯链路

本文详细介绍了如何利用STM32、4G模块和MQTT协议构建稳定可靠的物联网通讯链路。通过硬件选型、AT指令配置和MQTT连接实战,帮助开发者实现低功耗、高可靠性的数据传输,特别适合户外和移动场景应用。

weixin_29191081的博客 334

4种实现JS深拷贝的方法

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

sunnyjingqi的博客 5627

保姆级教程:用Unidbg搞定阿里系App的x-sign和长x-mini-wua签名(附完整Java代码)

本文详细介绍了如何使用Unidbg框架模拟执行阿里系App的原生库,生成关键的x-sign和x-mini-wua签名参数。通过完整的Java代码示例和实战技巧,帮助开发者高效实现签名算法,适用于安全研究、数据分析和第三方应用开发场景。

weixin_29243279的博客 486

关于JS实现深拷贝的几种方法

那么到这里,我们知道了深拷贝与浅拷贝的区别,同时从数据存储规则来解释,也明白了为什么要使用深拷贝;其次,我们知道了几种简单粗暴的深拷贝办法,也明白在何种情况下我们应该使用深拷贝。到此这篇关于JS实现深拷贝的文章就介绍到这了,希望对大家的学习有所帮助。转自:微点阅读。

hdxx2022的博客 2707

tewa-707e光猫超级密码获取方法

这款光猫很魔性,没有WIFI,没有USB接口,没有Telnet,试了很多方法去获取超级密码都不行。解密时可能会报错,可能是文件后面部分不晓得是咋拼接过来的,用AES解密时分组数据有问题。3、这个文件是用AES加密了的,直接打开是乱码,所以得用AES解密,key为16个字节的 x00。打开解出来的文件,然后搜索 telecomadmin,就可以发现超级密码了。参考资料里面的光猫不是同一款,但解密的方法基本相同的。

shaowl111的专栏 1万+

手把手教你用Arduino搭建惠斯通电桥:从原理到代码实现(附完整电路图)

本文详细介绍了如何利用Arduino搭建惠斯通电桥,从硬件选型、电路设计到代码实现和校准技巧,提供完整的电路图和实用代码示例。特别适合电子爱好者和创客学习高精度电阻测量技术,并扩展应用于应变片测量和温度监测等实际项目。

o4p5q6r7s的博客 400

JS对象拷贝的几种实现方法以及如何深拷贝

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

weixin_55263331的博客 4934

看懂特斯拉IMU底层逻辑,才懂农业机器人不可替代的核心技术壁垒

在自动驾驶与具身智能赛道,特斯拉彻底重构了IMU(惯性测量单元)的技术定位,打破行业“IMU仅为辅助补盲配件”的固有认知,将其从底盘附属硬件升级为纯视觉感知体系的物理核心基座。依托500–1000Hz超高刷新率、无外部依赖的惯性感知能力、端到端神经网络融合架构,特斯拉实现了“视觉感知环境、IMU定义运动”的技术闭环,摆脱对激光雷达、高精地图、卫星定位的强依赖。这套技术逻辑落地农业机器人赛道,不再是技术优化,而是规模化落地的生存刚需。城市自动驾驶属于结构化稳定场景,IMU仅作误差修正的锦上添花;

getusushu的博客 49

JS实现深拷贝的4种方法

进行深拷贝的方法:递归函数 (推荐使用,项目中使用的更多,更小,更安全)JSON.stringify() 和JSON.parse();(不推荐使用,如果遇到Function,Date等类型的变量容易出现一些意料之外的问题)第三方库lodash的cloneDeep()方法JQuery的extend()函数 (推荐在JQuery项目中使用,其他项目依然推荐是用递归函数)到此这篇关于JS实现深拷贝的4种方式的文章就介绍到这了,希望可以帮到你!微点阅读。

xinyuerr的博客 7981

CentOS7安装OpenSSL1.1.1s

CentOS7安装OpenSSL1.1.1s

Bertram的博客 733

【深度学习新浪潮】李飞飞团队VAGEN框架深度解析:让VLM智能体学会“三思而后行“

VAGEN框架的真正价值,不仅在于性能指标的突破,更在于重新定义了VLM智能体的发展方向——人工智能的进步不应只追求"做得对",更要实现"想得清"。李飞飞团队通过强制显式思考、动态表示适配和精细化奖励三大创新,让智能体第一次具备了可解释的世界建模能力。正如人类通过"观察-预测-行动"认识世界,VAGEN为AI注入的这种思考范式,或许正是通往通用人工智能的关键一步。对于开发者而言,开源的VAGEN框架不仅提供了强大的工具,更揭示了一个重要理念:让AI学会思考,比让它学会执行更重要。

专注:太空算力、AI infra、异构调度、大模型成本工程 280

js-深复制(封装)

深拷贝封装

zyt0502的博客 647

AutoSAR配置视频讲解:简介

AutoSAR实验视频讲解:闪烁一颗LED实验【简介】 大家好,欢迎来到雪云飞星的《AutoSAR实验课的视频讲解》专栏。看过《AutoSAR入门到精通系列讲解》的朋友们应该对博主不陌生,有很多朋友加了博主的微信成为了好友,还有朋友约过线下见面,博主很高兴大家能从我的博客中获得一些收获。在专栏里博主挖了很多坑,当时也说过想要录制一个AutoSAR的配置视频教程,素材在20年初就已经录好,中间各种原因足足鸽了一年。当时因为一些技术原因只能通过博客的图文形式展示出来,现在我们剪辑了视频,请了专业的配音,希望以视

雪云飞星的博客 9653

javascript 深拷贝 (多层嵌套解决方案)

在js中,数组和对象的复制 如果是用 = 号来进行复制,那只是浅拷贝。 如下图:对arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 var arr = [1,2,3,4] var arr2 = arr arr[0] = 5; console.log(arr) console.log(arr2) 数组的几种方法深拷贝总结 var arr = [3,...

肖皓文 4694

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

JS - 什么是深拷贝和浅拷贝?

什么是深拷贝和浅拷贝? 什么是拷贝 拷贝就是一个变量的值传给另外一个变量。

qq_44352182的博客 819

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

JavaScript深拷贝、浅拷贝详述

var A = {name:‘xl’,id: 6,study: {doing: ‘学习’打印结果为:似乎这样也把我们新添的方法拷贝成功了,但是如果我们修改B对象中study的值,A对象中的值会不会变化呢?B.study.doing = ‘上课’;打印结果为:可知,A里面的属性也相应被改变了。这是因为,我们浅拷贝拷贝的该方法的是更深层次对象的地址。说明:浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。我们还可以通过ES6新增的语法来实现我们的浅拷贝。

2401_83703835的博客 998

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

javascript深拷贝

在js中,数组和对象的复制 如果是用 = 号来进行复制,那只是浅拷贝。 如下图:对arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 var arr = [1,2,3,4] var arr2 = arr arr[0] = 5; console.log(arr) console.log(arr2) 数组的几种方法深拷贝总结 var arr = [3,4,1,6,...

weixin_43936704的博客 234

js对象深拷贝和浅拷贝

直接上代码最简单的实现对象深拷贝,仅仅2行代码 原理 先把对象转化为json格式的字符串,然后在解析成一个json格式的对象 可以看到打印结果 备注js 原生对象有 Object.assign() 只可以浅拷贝,如果元素里边再包含引用数据,copy 的只是一个引用地址 如下 (备注,json.stringify 虽然好用,但是数据量特别大的时候,会耗费性能的,所以还是慎重使用哦!) 最后...

yq_dxp1218的博客 208

javascript中的深复制

javascript深拷贝是初学者甚至有经验的开发着,都会经常遇到问题,并不能很好的理解javascript的深拷贝。       深拷贝(deepClone)是神马,与深拷贝相对应的就是浅拷贝,刚开始我也没弄懂。       在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值引用值类型的时候,只是共享一个内存区域,导致赋值的时候,还跟之前的值保持一直性。看一个具体的例子// 给t

SweetoDream 1953

js---封装浅拷贝和深拷贝

基本数据类型和引用数据类型的存储方式。

前端与计算机相关知识的分享,博主的qq523235674 692

JavaScript 深拷贝

JavaScript 深拷贝 目录JavaScript 深拷贝常见的错误1. 数组拷贝用Array.prototype.slice()2. 过分依赖 JSON.parse(JSON.stringify(obj))实现深拷贝 常见的错误 1. 数组拷贝用Array.prototype.slice() ​ 这是一个常见的错误,我们来看两个例子 let arr = new Array(1,2) let ...

yhy1315的博客 361

用JavaScript封装一个使用递归方式的深拷贝方法deepClone

在某些特殊场景下,可能需要根据实际情况进行适当的调整。方法通过递归来实现深拷贝。,并对原始数组进行遍历。对于每个元素,使用递归调用。判断确保只处理对象自身的属性,然后使用递归调用。如果传入的对象是普通对象类型,则创建一个空对象。或者不是对象类型,如果是,则直接返回该对象。循环遍历原始对象的属性。来进行深拷贝,并将拷贝得到的元素添加到。来进行深拷贝,并将拷贝得到的属性值赋给。下面是一个使用递归方式的深拷贝方法。如果传入的对象是数组类型(使用。:这个示例假设目标环境支持。最后,返回拷贝后的对象。

weixin_57909742的博客 317

(JS three)闭包,浅拷贝,深拷贝

闭包、浅拷贝、深拷贝

weixin_53412458的博客 734

JS实现二维数组的深拷贝及插件代码

深拷贝与浅拷贝的介绍 在写代码前先简短介绍下JS中浅拷贝与深拷贝的区别。 JavaScript中有两种类型的对象拷贝:浅拷贝(Shallow Copy)、深拷贝(Deep Copy): 深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。 浅拷贝——只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做“浅拷贝(浅复制)”,也就是说,浅复制仅仅...

qq_40756247的博客 1536

js 中的深拷贝

hasOwnProperty 的作用 官方解释: 如果object 具有带指定名称的属性, 则hasOwnProperty 方法返回true, 否则返回false. 次方法不会检查对象原型中的属性, 该属性必须是对象本身中的一个成员. 什么是深拷贝?? 如何区分深拷贝,简单点来说, 就是假设B赋值了A, 当修改A时, 看B是否会发生变化, 如果B也跟着变化了,说明就是浅拷贝,拿人手短, 如果B没变, 那就是深拷贝, 自

weixin_45541467的博客 210

JavaScript-DOM节点操作深拷贝浅拷贝递归

基本数据类型和引用数据类型 基本数据类型:number,String,Boolean,null,undefined 引用数据类型:object,array,function 基本数据类型和引用数据类型的区别 1:值是否可变 .基本类型的值是不可变得: .引用类型的值是可变的 2:数据的比较 .基本类型的比较是值的比较—只有在它们的值相等的时候它们才相等 如果他们的类型不相等;在进行比较的过程中;=...

Abby_zzy的博客 2181
上一篇: javascript ES6鼠标划入产生水纹波动效果
下一篇: Vue禁止浏览器自动填充
Boriska1996
博客等级 码龄7年 22粉丝 77原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值