扩展运算符理解
程序员文章站
2022-06-16 10:33:15
...
扩展运算符是否为深拷贝
// key是键,value是值
let obj = { key :value }
- 当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的改变而改变
- 但是,当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数据转换。