JS—深拷贝与浅拷贝

拷贝原理:

javaScript中,基础类型的值是直接拷贝一份新的一模一样的数据,这2份数据,相互独立,互不影响;引用类型(Object)的复制,则是传递对象的引用,也就是对象所在的内存地址,相当于多个变量指向同一个对象,那么只要其中一个变量对这个对象进行修改,其他的变量所指向的对象也会跟着修改(因为他们指向的是同一个对象)


浅拷贝的5种方法:

A对B进行浅拷贝(若是基础类型,则直接拷贝值;若是引用类型,拷贝的是引用地址)

B的值就会赋予给A,A值=B值。当A值发生改变时(指向的是B的引用地址),B也同时会改变

1、Obejct . assign ( )

该函数默认是对对象进行深拷贝,但是只对最外层的进行深拷贝(当对象内嵌套对象时,被嵌套的对象依然是进行浅拷贝)。只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址(2者指向的是同一个地址),因此不是深拷贝。

// 通过Obejct . assign ( ) 实现浅拷贝
let a = {
	age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

2、... 扩展运算符 实现浅拷贝

// 通过...实现浅拷贝
let a = {
	age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1

3、Array.prototype.contact ( ) 拷贝数组

4、Array.prototype.slice()拷贝数组

5、遍历赋值

注:浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,那么就又回到最开始的话题了, 两者享有相同的地址。要解决这个问题,我们就得使用深拷贝了。

深拷贝的3种方式:主要针对Object类型

在堆内存中为新对象开辟空间,存在与被拷贝对象同样的属性与属性值。当原对象的值发生改变时,不会影响到新对象,值也不会指向新对象的地址

1、通过  JSON.parse(JSON.stringify(object)) 解决。本质是JSON会自己构建新的内存来存放新对象。

     但会有局限性:会忽略undefined,symbol,不能序列化函数,不能解决循环引用的对象

let a = {
	age: 1,
	jobs: {
		first: 'FE'
	}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

2、递归实现深拷贝

function cloneDeepDi(obj){
  const newObj = {};
  let keys = Object.keys(obj);
  let key = null;
  let data = null;
  for(let i = 0; i<keys.length;i++){
    key = keys[i];
    data = obj[key];
    if(data && typeof data === 'object'){
      newObj[key] = cloneDeepDi(data)
    }else{
      newObj[key] = data;
    }
  }
  return newObj
}

3、引用lodash库的_.cloneDeep( ) (最完美)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值