js克隆的理解之深层克隆和浅层克隆(代码实例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是介绍js克隆的理解之深层克隆和浅层克隆(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

<script> //判断是不是原始值//判断是数组还是对象//建立相应的数组或对象 var obj = {  name: '辣鸡',  sex: 'male',  card: ['laobi', 'feiwu'],  wife: {   name: '智障',   son: {    name: '彩笔'   }  } } var obj1 = {}  function deepClone(Origin, Target) {  var Target = Target || {},   toStr = Object.prototype.toString,   arrStr = '[object Array]';  for(var prop in Origin) { //第一步,判断对象是不是原始值   if(Origin.hasOwnProperty(prop)) {    if(typeof(Origin[prop]) == 'object') {     if(toStr.call(Origin[prop]) == arrStr) {      Target[prop] = [];     } else {      Target[prop] = {};     }     deepClone(Origin[prop], Target[prop]);    } else {     Target[prop] = Origin[prop];    }   }  } } </script>

js克隆的理解之深层克隆和浅层克隆(代码实例)

js克隆的理解之深层克隆和浅层克隆(代码实例)

深层克隆

注意:判断是否是原型的方法,要首先想到for in 和hasProperty的方法,然后再用typeof(Origin[prop]) ==’object’,

  判断数组和对象的方法,则有三种,constructor ,toString call ,instanceof

   此处用的是toString.call(Origin[prop]==’arrStr’),其实就是判断是否是[object Array]

   最后递归则用回调deepClone()方法,建立相应数组和对象

下面是通过三目运算符完善代码,并且加了判断方法不为空,还有加了返回值Target

function deepClone(Origin, Target) {  var Target = Target || {},   toStr = Object.prototype.toString,   arrStr = '[object Array]';  for(var prop in Origin) { //第一步,判断对象是不是原始值   if(Origin.hasOwnProperty(prop)) {    if(typeof(Origin[prop]) == 'object' && Origin[prop] !== 'null') {     target[prop] = toStr.call(Origin[prop]) == arrStr ? [] : {};     deepClone(Origin[prop], Target[prop]);    } else {     Target[prop] = Origin[prop];    }   }  }  return Target; }

浅层克隆

var obj3={     name:'abc',     sex:'boy',     height:178} var obj4={}  function clone(Origin,Target){     var Target = Target||{};//防止用户不传Target     for ( prop in Origin){         Target[prop]=Origin[prop]         }     return Target;     }     clone(obj3,obj4)

js克隆的理解之深层克隆和浅层克隆(代码实例)

需要注意的是,如果修改Origin的值,则不会改变Target的值

js克隆的理解之深层克隆和浅层克隆(代码实例)

但是如果obj3里面有数组属性,调用方法改变obj4的数组属性时,也会改变obj3,因为是引用属性:

js克隆的理解之深层克隆和浅层克隆(代码实例)

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » js克隆的理解之深层克隆和浅层克隆(代码实例)

发表评论

提供最优质的资源集合

立即查看 了解详情