热门关键字:
jquery > jquery教程 > jquery教程 > js中实现对象拷贝有哪些方法!

js中实现对象拷贝有哪些方法!

220
作者:管理员
发布时间:2021/6/3 15:20:29
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4858
  这就是我们今天要讲的知识点,对象的深克隆和浅克隆


  原生深克隆方法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()特别值得注意的地方。


  扩展运算符


  提示:?实际上, 展开语法和?Object.assign()?行为一致, 执行的都是浅拷贝(只遍历一层)。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐