用structuredClone来实现深拷贝?

js的深拷贝，老生常谈

---

在JavaScript中，深拷贝（deep copy）意味着创建一个新对象，它的结构和原始对象相同，但是所有属性都是原始值的副本，而不是指向原始对象中的同一内存地址。这样做可以确保修改新对象不会影响原始对象。以下是几种实现深拷贝的方法：

1. 使用JSON方法：

通过JSON.stringify()将对象转换为JSON字符串，然后使用JSON.parse()将字符串解析回对象。这种方法简单易用，但有局限性，例如无法复制函数、undefined、循环引用等。

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

2. 使用structuredClone方法（浏览器环境）：

structuredClone 是一种在浏览器环境中可用的算法，用于将结构化数据对象进行序列化和反序列化，从而实现深拷贝。它主要用于Web Workers和IndexedDB等场景，以在不同的执行上下文之间传输复杂的数据结构。structuredClone 函数可以处理包括数组、对象、Map、Set、Date、RegExp等在内的多种数据类型，并且能够处理循环引用和二进制数据。

语法1： structuredClone(value)：

function deepClone(obj) {
  return structuredClone(obj);
}

语法2： structuredClone(value, { transfer })：

使用这种形式时，transfer 选项允许你指定一个包含可传输对象的数组。可传输对象是指那些可以通过Web Workers边界传输的对象，比如 ArrayBuffer。当你在 transfer 数组中包含一个对象时，该对象的所有权将被转移给克隆后的对象，原始对象将失去对这个对象的访问权。

const buffer = new ArrayBuffer(8);
const original = {
  message: "Hello",
  data: buffer
};

const clone = structuredClone(original, { transfer: [buffer] });

|- 在这个例子中，buffer 是一个 ArrayBuffer，它被包含在 transfer 数组中。
|- 这意味着 clone 对象将获得 buffer 的所有权，而 original 对象将无法再访问这个 ArrayBuffer。

• structuredClone 是一个非常有用的方法，特别是在需要在不同的执行上下文之间传输大量数据时。
• 需要注意的是，并不是所有的浏览器都支持 structuredClone，因此在生产环境中使用前应该`检查兼容性。
• structuredClone 也有一些限制，比如不能传输函数、错误对象、Promise等，也不能处理不可序列化的数据。在使用 structuredClone 时，应该确保理解这些限制，以避免运行时错误。

3. 递归拷贝：

创建一个递归函数，遍历对象的所有属性，对每个属性进行拷贝。如果属性是基本类型，直接复制值；如果属性是对象或数组，则递归调用拷贝函数。

function deepClone(obj, hash = new WeakMap()) {
  if (obj instanceof RegExp) return new RegExp(obj);
  if (obj instanceof Date) return new Date(obj);
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  const cloneObj = new obj.constructor();
  hash.set(obj, cloneObj);
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}

4. 使用第三方库Lodash：

一些第三方库提供了深拷贝的功能，例如Lodash的_.cloneDeep()方法。

const _ = require('lodash');
const newObj = _.cloneDeep(originalObj);