博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原生JS 实现复杂对象深拷贝(对象值包含函数)
阅读量:7038 次
发布时间:2019-06-28

本文共 1153 字,大约阅读时间需要 3 分钟。

以前对深拷贝和浅拷贝没有太深的印象,后来才知道是因为没掉进去过它的坑里。最近掉坑了才意识到它们的重要性。

闲话少叙,来说说坑:如果我需要保存一个复杂的对象 obj 并把它赋值给 originalObj ,后来对obj对象的某个属性值进行了修改,然后,,,我保存的初始值originalObj 也被修改了!!!

这个时候明眼人应该看出问题来了:因为我给originalObj 赋值的时候用的是浅拷贝,所以修改obj 的属性值的时候,originalObj 也跟着变了。这就是浅拷贝的直接表现。
那么 假如我想保存一份初始值originalObj ,不管 obj 怎么修改,都保持originalObj 始终不变,该怎么办呢?答案就是用深拷贝。。。
网上有很多方法,比如Object.assign()、JSON对象的parse和stringify、JQ的extend等,但是它们有一个共同的问题就是对简单对象可以实现深拷贝,但是对复杂对象就不行了,比如这样一个对象(属性值有函数、数组、复杂对象等):

clipboard.png

这个时候刚才那几个方法就不行了。那该怎么办呢?

这个时候就需要自己写一个函数了:

function copyFn(obj) {    if (obj == null) { return null }     var result = Array.isArray(obj) ? [] : {};     for (let key in obj) {         if (obj.hasOwnProperty(key)) {             if (typeof obj[key] === 'object') {             result[key] = copyFn(obj[key]); // 如果是对象,再次调用该方法自身             } else {             result[key] = obj[key];             }         }     }     return result; }

然后 copy 对象的效果如下:

let obj_2 = deepCopy(obj_1); console.log(obj_1); // 修改name属性之前,打印出来 name 也是 Edited obj_1.name = 'Edited'; console.log(obj_1); // 修改name属性之后,打印出来 name 是 Edited console.log(obj_2); // 由于是深拷贝,修改obj_1 的 name属性之前,不影响 obj_2 的 name 属性

clipboard.png

希望这个用函数实现复杂对象的深拷贝的方法对您有所帮助!

转载地址:http://owfal.baihongyu.com/

你可能感兴趣的文章
房地产行业的商业智能BusinessIntelligence介绍
查看>>
【转】管理者与领导者的区别
查看>>
Redmine、Apache、Git集成遇到的重重困难
查看>>
emSecure Use Digital Signatures to protect your products
查看>>
hdu 4911 Inversion
查看>>
理解 OpenStack + Ceph (1):Ceph + OpenStack 集群部署和配置
查看>>
Yii2结合webuploader实现图片上传
查看>>
STM32-F0/F1/F2
查看>>
angularjs 实现 文件拖拽,缩略图显示
查看>>
矩阵分解方法
查看>>
一共81个,开源大数据处理工具汇总(下),包括日志收集系统/集群管理/RPC等...
查看>>
#上海ORACLE用户组2014在论坛#时刻
查看>>
springMVC 使用jstl
查看>>
Content-Length实体的大小
查看>>
Atitit.常用分区api的attilax总结
查看>>
python的函数及参数
查看>>
PRISM 4 - RegisterViewWithRegion & Custom Export Attributes
查看>>
AngularJs $interpolate 和 $parse
查看>>
Visual Studio 2015 Update 1 ISO
查看>>
Quartz.NET开源作业调度框架系列(三):IJobExecutionContext 参数传递
查看>>