JavaScript关于值引用，浅拷贝与深拷贝

值引用

由于js复杂数据类型使用的是堆内存，所以直接将复杂数据类型赋给变量就是值引用

let arr=[1,2,3]

let arrCopy=arr
console.log(arrCopy===arr)//true
arrCopy.push(4)
console.log(arr)//[1,2,3,4]

浅拷贝与浅拷贝的四种方式

浅拷贝顾名思义就是拷贝的只有一层，多层会受影响（这个影响指的是修改数据时双方都会同步更新，无法真正的断开）

1. 使用…扩展运算符

let arr = [1, 2, 3,{a:1}]
let arrCopy = [...arr]
console.log(arrCopy === arr)//false
arrCopy[3].a=2
console.log(arr)//a变为2

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

3. 使用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

4. 使用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 对象和数组如果深度嵌套，浅拷贝只能实现第一层的拷贝，但是深度的值依然和原对象共享引用。
我们希望的深拷贝是无论是嵌套多少层数组和对象，拷贝的数组、对象和原来的数组、对象互不受影响。
深拷贝和浅拷贝的区别在于，浅拷贝对于数组和对象仅仅包含原始值时表现良好，但是数组和对象中嵌套其他数组和对象便不能正确拷贝。

1. 使用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

2. 使用structuredClone

let arr = [1, 2, 3,{a:1}]
let arrCopy=structuredClone(arr)
console.log(arrCopy === arr)
arrCopy[3].a=2
console.log(arr)

3. 手撕深拷贝代码

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
}