扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下js中如何实现对象拷贝,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目成都网站设计、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元翁牛特做网站,已为上家服务,为翁牛特各地企业和个人服务,联系电话:18980820575
原生深克隆方法JSON.parse / stringify
这是一种会丢失某些数据的克隆方法。
如果你不使用Date,function,undefined,Infinity,正则表达式,Map集合,Set集合,Bolbs,FileLists,ImageDatas,稀疏数组sparse Arrays,类型化数组Typed ?Arrays或其他复杂类型的对象中,一个很简单的深克隆的对象方法就是:
JSON.parse(JSON.stringify(object))
以下为演示例子:
?打印出结果如下
可以发现使用JSON.parse(JSON.stringify(object))丢失的数据类型比较多。所以在使用它的时候,我们需要清楚的知道目标对象object的数据类型。一般来说,如果我们需要处理的数据只有number,string,null类型,才推荐使用这个方法进行数据对象的克隆。
使用库进行深克隆
由于克隆对象并非易事(复杂类型,循环引用,函数等),因此大多数主要库都提供了克隆对象的功能。如果您已经在使用的库已经提供了克隆方法,你可以直接使用,大多数情况下库的克隆方法总比你自己写的完善得多。
lodash:_.cloneDeep方法
可以通过lodash.clonedeep模块单独导入,如果您尚未使用提供深度克隆功能的库,则可能是您的最佳选择
Example
AngularJS:angular.copy方法(Deep?Copy)
angular.copy(source,?[destination]);
jQuery:jQuery.extend(true, { }, oldObject);?
输出结果
jQuery还有一个。clone()的方法,仅克隆DOM元素。第一个参数为true,表示递归深层复制。这里不展开讨论。
ES6的浅克隆
为了完整起见,请注意ES6提供了两种浅表复制机制:Object.assign()和扩展运算符。
Object.assign()
MDN上说了:
?Object.assign()拷贝的是属性值。假如源对象sources的属性值是一个对象的引用,那么它也指向那个引用。
如果源对象的属性值为简单类型(string, number),通过Object.assign({},obj1);那么会得到这个属性值的独立拷贝;如果属性值为对象或其它引用类型,那么它会指向这个对象的引用。这是Object.assign()特别值得注意的地方。
以上是“js中如何实现对象拷贝”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流