ES6 深拷贝_浅拷贝与深拷贝(个人理解)

d984a9c2fc050ebca14cbebc730fbdd0.png
深拷贝和浅拷贝的区别

1、浅拷贝只复制一层对象的属性、值引用 (场景:对于只有一层结构的Array和Object想要拷贝一个副本时使用)

2、深拷贝则递归复制了所有层级、地址引用 (场景:复制深层次的object的数据结构)

浅拷贝的实现方式
1、ES6 的 Object.assign()  //当object只有一层时是深拷贝
   var obj = {a:{a:'kobe',b:39}};
   var initobj = object.assign({},obj)
   initobj.a.a = 'kuli';
   console.log(obj.a.a)//kuli

2、Array.prototype.cancat()  //concat的方法是不修改原数组,只会返回一个浅复制原数组中的新数组
  let arr = [1,3{ username: 'kobe' }]
  let arr2 = arr.concat();
  arr2[2].username = 'kuli';
  console.log(arr)  //kuli

3、ES6中的对象扩展
  let list = [0,1,2,3,4]
  let newList = {...list};

4、Array.prototype.slice() //slice的方法是不修改原数组,只会返回一个浅复制原数组中的新数组
  let arr = [1,3,{ username: 'kobe' }]
  let arr2 = arr.slice()
  arr[2].username = 'kuli'
  console.log(arr) //kuli
深拷贝的实现的方式
1、ES6 的 Object.assign()  //当下为一层(深拷贝)
  let obj = { username:'kobe' }
  let obj2 = Object.assign({},obj)
  obj2.username = 'kuli'
  console.log(obj) //kobe

2、JSON.stringify 和 JSON.parse  //并不能拷贝函数
  JSON.parse(JSON.stringify(obj));

3、递归实现
  deepClone(obj){
   let objClone = Array.isArray(obj)?[]:{};
   if(obj && typeof obj==="object"){
    for(let key in obj){
      // 判断是不是自有属性,而不是继承属性
      if(obj.hasOwnProperty(key)){
        //判断ojb子元素是否为对象或数组,如果是,递归复制
        if(obj[key]&&typeof obj[key] ==="object"){
          objClone[key] = this.deepClone(obj[key]);
        }else{
          //如果不是,简单复制
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
 }

4、什么JQ的extend方法(咱也没用过,咱也不知道)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值