浅拷贝与深拷贝

JS 中有个重要的类型叫做引用类型。这种类型在使用的过程中,因为传递的值是引用,所以很容易发生一些副作用,比如:

let a = { age: 1 }
let b = a
b.age = 2

上述代码的写法会造成 a 和 b 的属性都被修改了。大家在日常开发中肯定不想出现这种情况,所以都会用上一些手段去断开它们的引用连接。对于上述的数据结构来说,浅拷贝就能解决我们的问题。

方法一:...运算符

let a = { age: 1 }
let b = { ...a }
b.age = 2

方法二:Object.assign

let a = { age: 1 }
let b = Object.assign(a)

但是浅拷贝只能断开一层的引用,如果数据结构是多层对象的话,浅拷贝就不能解决问题了,这时候我们需要用到深拷贝。

深拷贝的做法一般分两种:

第一种:JSON.stringify

原理:是将对象转化为字符串,而字符串是简单数据类型。

这种写法非常简单,而且可以应对大部分的应用场景,但是它还是有很大缺陷的,比如拷贝其他引用类型、拷贝函数、循环引用等情况。

第二种:递归拷贝

function deepClone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let keys in source){ // 遍历目标
    if(source.hasOwnProperty(keys)){
      if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象,就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {};
        targetObj[keys] = deepClone(source[keys]);
      }else{ // 如果不是,就直接赋值
        targetObj[keys] = source[keys];
      }
    }
  }
  return targetObj;
}  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值