关于ES6的拓展运算符进行深拷贝

很多博客说ES6的拓展运算符**…**也可进行深拷贝对象,但其实是有坑的。

对象的一般格式为:

// key是键,value是值
let obj = { key :value }
  1. 当value是基本数据类型,比如String,Number,Boolean时,是可以使用拓展运算符进行深拷贝的。比如:
// value是基本数据类型
let oldObj = { id: 1 }
let newObj = { ...oldObj }

oldObj.id = 2

console.log(oldObj) // {id: 2}
console.log(newObj) // {id: 1} // 不随着oldObj的改变而改变
  1. 但是,当value是引用类型,比如Object,Array,这时使用拓展运算符进行深拷贝,得到的结果是和深拷贝的概念有矛盾的。主要是因为引用类型进行深拷贝也只是拷贝了引用地址。比如:
// value是引用类型
let oldObj = { type: { id: 1 } }
let newObj = { ...oldObj } // 此时拷贝了{id : 1}的引用地址

oldObj.type.id = 2 // 改变引用对象里面的值

console.log(oldObj) // {type: {id: 2}}
console.log(newObj) // {type: {id: 2}} 随着oldObj的改变而改变

oldObj.type = { id: 3 } // 改变引用的对象,实际改变了引用对象的地址

console.log(oldObj) // {type: {id: 3}}
console.log(newObj) // {type: {id: 2}} 不随着oldObj的改变而改变

总结:深拷贝最好使用lodash的cloneDeep方法或者JSON数据转换,参考Javascript深拷贝

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值