值引用
由于js复杂数据类型使用的是堆内存,所以直接将复杂数据类型赋给变量就是值引用
let arr=[1,2,3]
let arrCopy=arr
console.log(arrCopy===arr)//true
arrCopy.push(4)
console.log(arr)//[1,2,3,4]
浅拷贝与浅拷贝的四种方式
浅拷贝顾名思义就是拷贝的只有一层,多层会受影响(这个影响指的是修改数据时双方都会同步更新,无法真正的断开)
- 使用…扩展运算符
let arr = [1, 2, 3,{a:1}]
let arrCopy = [...arr]
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a变为2
- 使用slice
let arr = [1, 2, 3,{a:1}]
let arrCopy = arr.slice()
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a变为2
- 使用assign()
let arr = [1, 2, 3,{a:1}]
let arrCopy
Object.assign(arrCopy??=[],arr)
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a变为2
- 使用Array.form()
let arr = [1, 2, 3,{a:1}]
let arrCopy=Array.from(arr)
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a变为2
深拷贝
JavaScript 对象和数组如果深度嵌套,浅拷贝只能实现第一层的拷贝,但是深度的值依然和原对象共享引用。
我们希望的深拷贝是无论是嵌套多少层数组和对象,拷贝的数组、对象和原来的数组、对象互不受影响。
深拷贝和浅拷贝的区别在于,浅拷贝对于数组和对象仅仅包含原始值时表现良好,但是数组和对象中嵌套其他数组和对象便不能正确拷贝。
- 使用JSON序列化与反序列化
let arr = [1, 2, 3,{a:1}]
let arrCopy=JSON.parse(JSON.stringify(arr))
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a依旧是1
- 使用structuredClone
let arr = [1, 2, 3,{a:1}]
let arrCopy=structuredClone(arr)
console.log(arrCopy === arr)
arrCopy[3].a=2
console.log(arr)
- 手撕深拷贝代码
let arr = [1, 2, 3,{a:1}]
let arrCopy=deepColone(arr)
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a依旧是1
function deepColone(obj){
if(typeof obj!=='object'||obj==null){
return obj
}
let arrCopy=Array.isArray(obj)?[]:{}
for(let key in obj){
arrCopy[key]=deepColone(obj[key])
}
return arrCopy
}