JS中对象数组深拷贝方法

•  structuredClone()

•  JavaScript 中提供了一个原生 API 来执行对象的深拷贝：structuredClone。它可以通过结构化克隆算法创建一个给定值的深拷贝，并且还可以传输原始值的可转移对象。

当对象中存在循环引用时，仍然可以通过 structuredClone() 进行深拷贝。

      const A = {
        set: new Set([1, 3, 3]),
        map: new Map([[1, 2]]),
        regex: /foo/,
        error: new Error('Hello!')
      }
      A.a = A

      const copied = structuredClone(A)
      console.log(copied)

注意：

原型链不能被遍历或拷贝（克隆的对象将不再是这个类的一个实例（但是这个类的所有有效属性都将被拷贝）） 

不能拷贝函数、方法DOM节点 、属性描述符、setter 和 getter 以及类似的元数据不能被克隆

支持拷贝的类型： 

Array（数组）、ArrayBuffer（数据缓冲区）、Boolean（布尔类型）、DataView（数据视图）、Date（日期类型）、Error（错误类型，包括下面列出的具体类型）、Map（映射类型）、Object （仅指纯对象，如从对象字面量中创建的对象）、原始类型（除symbol外，即 number、string、null、undefined、boolean、BigInt）、RegExp（正则表达式）、Set（集合类型）、TypedArray（类型化数组）。

• JSON.parse(JSON.stringify())

使用时需要注意: 

JSON.stringify 只能处理基本对象、数组和基本类型，而其他类型的值在转换之后都可能出现出乎意料的结果，例如 Date 会转化为字符串， Set 会转化为 {}。

JSON.stringify甚至完全忽略某些内容，比如undefined或函数。 

JSON.parse(JSON.stringify(x)) 无法对包含循环引用的对象进行深克隆

      const A = {
        set: new Set([1, 3, 3]),
        map: new Map([[1, 2]]),
        regex: /foo/,
        error: new Error('Hello!')
      }
      A.a = A

      const copied = JSON.parse(JSON.stringify(A))

报错：

 

所以，如果对象没有上面说的这些情况，使用 JSON.parse(JSON.stringify(x)) 进行深克隆是完全没有问题的。如果有，就可以使用 structuredClone() 来进行深拷贝。

实现深拷贝只需以下三个核心步骤：

1. 创建出对应数据类型的空白数据。即，若须拷贝的是对象类型数据，则创建一个空白对象，以此类推。
2. 拷贝目标数据。即把目标数据拷贝到步骤1中创建的空白数据里。
3. 返回拷贝的数据。

• 手写递归方法：(递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝)

export function deepClone(data: any){
  // 普通类型数据则直接返回
  
  // 循环引用处理
  
  // 1. 创建对应类型的空白数据
  
  // 2. 复制
  
  // 3. 返回
  
}

其他拷贝方式： 

 Object.assign/解构赋值/arr.concat
当拷贝内容中数据的值都是简单数据类型时，是深拷贝
当拷贝内容中数据的值出现引用数据类型时，引用数据仍然是浅拷贝，只有简单数据类型是深拷贝

浅拷贝和深拷贝只是对复杂数据类型（引用数据类型）才有的说法，简单数据类型都是值传递，不存在深浅拷贝 

赋值赋的是栈中的地址，用的都是同一个存储空间

浅拷贝它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，即只复制对象空间而不复制资源

深拷贝是完全拷贝一份一模一样的原对象，在堆内存空间中分配新的内存存放赋值后的对象，其中一个对象的改变不会影响到另一个对。

小白一枚，如有不足或错误之处，感谢指正！

转载于：

JavaScript 中更现代的深拷贝方法！ - 掘金 (juejin.cn)