JS `structuredClone()` (ES2022)：深拷贝对象的标准方法

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊JS里深拷贝的官方“嫡传弟子”——structuredClone()。

过去，一提到深拷贝，大家脑海里浮现的可能是JSON序列化/反序列化、递归函数，或者各种第三方库。这些方法各有优缺点，但总感觉不够“正统”。现在好了，ES2022给我们带来了structuredClone()，一个官方标准、性能可靠的深拷贝方法。

一、什么是深拷贝，为什么需要它？

首先，我们得搞清楚深拷贝和浅拷贝的区别。

浅拷贝 (Shallow Copy): 创建一个新对象，但新对象的属性仍然是原始对象属性的引用。也就是说，新对象和原始对象共享同一块内存地址。修改其中一个对象，另一个对象也会跟着改变。
深拷贝 (Deep Copy): 创建一个全新的对象，并且递归地复制原始对象的所有属性，包括嵌套的对象和数组。新对象和原始对象完全独立，互不影响。

举个例子：

let obj1 = {
  name: '张三',
  address: {
    city: '北京'
  }
};

// 浅拷贝
let obj2 = Object.assign({}, obj1);
//或者
let obj3 = {...obj1};

obj2.name = '李四';
obj2.address.city = '上海';

console.log('obj1:', obj1);
console.log('obj2:', obj2);
console.log('obj3:', obj3);

输出结果会是：

obj1: { name: '张三', address: { city: '上海' } }
obj2: { name: '李四', address: { city: '上海' } }
obj3: { name: '张三', address: { city: '上海' } }

可以看到，虽然我们只修改了 obj2 的 name 和 address.city，但是 obj1 和 obj3 的 address.city 也跟着变了！这就是浅拷贝的“副作用”。

那么，什么情况下我们需要深拷贝呢？通常在以下场景：

避免意外修改: 当你需要操作一个对象，但又不想影响原始对象时。
数据隔离: 在React、Vue等框架中，为了避免组件之间的状态污染，经常需要深拷贝数据。
复杂的嵌套对象: 当对象包含多层嵌套时，浅拷贝无法满足需求。

二、 structuredClone() 的基本用法

structuredClone() 的用法非常简单：

const originalObject = {
  name: '王五',
  age: 30,
  hobbies: ['coding', 'reading'],
  address: {
    city: '深圳',
    zip: '518000'
  }
};

const clonedObject = structuredClone(originalObject);

clonedObject.name = '赵六';
clonedObject.address.city = '广州';
clonedObject.hobbies.push('gaming');

console.log('originalObject:', originalObject);
console.log('clonedObject:', clonedObject);

输出结果：

originalObject: {
  name: '王五',
  age: 30,
  hobbies: [ 'coding', 'reading' ],
  address: { city: '深圳', zip: '518000' }
}
clonedObject: {
  name: '赵六',
  age: 30,
  hobbies: [ 'coding', 'reading', 'gaming' ],
  address: { city: '广州', zip: '518000' }
}

可以看到， clonedObject 的修改没有影响到 originalObject，实现了真正的深拷贝。

三、 structuredClone() 的高级用法 (Options)

structuredClone() 还可以接受一个可选的 options 对象，用于控制拷贝行为：

structuredClone(value, { transfer: transferableList });

transfer: 这是一个可转移对象的数组。可转移对象是指那些所有权可以从一个上下文转移到另一个上下文的对象，比如 ArrayBuffer、MessagePort、ImageBitmap 等。当 transfer 选项被使用时，原始对象中的可转移对象会被转移到新对象中，原始对象中的这些对象会变成 unusable。

举个 ArrayBuffer 的例子：

const originalBuffer = new ArrayBuffer(16);
const originalView = new Uint8Array(originalBuffer);
originalView[0] = 1;

const clonedBuffer = structuredClone(originalBuffer, { transfer: [originalBuffer] });

console.log('originalBuffer.byteLength:', originalBuffer.byteLength); // 0 (unusable)
console.log('clonedBuffer.byteLength:', clonedBuffer.byteLength);   // 16

在这个例子中，原始的 ArrayBuffer 的所有权被转移到了克隆后的 ArrayBuffer。原始的 ArrayBuffer 变得 unusable，而克隆后的 ArrayBuffer 则包含了原始数据。

四、 structuredClone() 的限制

structuredClone() 虽然强大，但也不是万能的，它有一些限制：

循环引用: structuredClone() 可以处理循环引用，不会导致无限递归。但是，如果循环引用非常复杂，可能会影响性能。
函数和类: structuredClone() 不能拷贝函数和类。如果你尝试拷贝包含函数或类的对象，会抛出一个 DataCloneError 异常。
DOM 节点: structuredClone() 不能拷贝 DOM 节点。同样会抛出 DataCloneError 异常。
Error 对象: structuredClone() 可以拷贝 Error 对象，但是拷贝后的 Error 对象的 stack 属性会丢失。
原型链: structuredClone() 不会拷贝对象的原型链。克隆后的对象的原型会被设置为 null。
不可序列化的值: 某些值是不可序列化的，例如 undefined、Symbol、WeakMap、WeakSet。 structuredClone() 会将这些值替换为 null。

为了更清晰地了解 structuredClone() 的限制，我们用表格的形式总结一下：

数据类型	是否支持拷贝	拷贝后的行为
基本数据类型	支持	正常拷贝
对象 (Object)	支持	深拷贝
数组 (Array)	支持	深拷贝
Map	支持	深拷贝
Set	支持	深拷贝
Date	支持	深拷贝
RegExp	支持	深拷贝
ArrayBuffer	支持	深拷贝 (可以通过 `transfer` 选项转移所有权)
TypedArray	支持	深拷贝
函数 (Function)	不支持	抛出 `DataCloneError` 异常
类 (Class)	不支持	抛出 `DataCloneError` 异常
DOM 节点	不支持	抛出 `DataCloneError` 异常
Error	支持	拷贝，但 `stack` 属性丢失
undefined	支持	替换为 `null`
Symbol	支持	替换为 `null`
WeakMap	支持	替换为 `null`
WeakSet	支持	替换为 `null`
原型链	不支持	克隆后的对象的原型会被设置为 `null`
循环引用	支持	可以处理，但复杂的循环引用可能影响性能

五、 structuredClone() vs. JSON.parse(JSON.stringify(obj))

在 structuredClone() 出现之前，JSON.parse(JSON.stringify(obj)) 是常用的深拷贝方法。那么，structuredClone() 相比于 JSON.parse(JSON.stringify(obj)) 有什么优势呢？

性能: structuredClone() 通常比 JSON.parse(JSON.stringify(obj)) 更快，尤其是在处理大型对象或包含循环引用的对象时。因为 JSON.parse(JSON.stringify(obj)) 需要将对象序列化成 JSON 字符串，然后再反序列化成对象，这个过程涉及到大量的字符串操作，而 structuredClone() 则直接在内存中进行拷贝。
类型支持: JSON.parse(JSON.stringify(obj)) 不能拷贝 undefined、Date、RegExp、Map、Set 等类型。 structuredClone() 则支持这些类型。
错误处理: 当对象包含循环引用时，JSON.stringify() 会抛出一个 TypeError 异常。 structuredClone() 可以处理循环引用。
可转移对象: structuredClone() 可以通过 transfer 选项转移可转移对象的所有权，这是 JSON.parse(JSON.stringify(obj)) 无法做到的。

我们再用一个表格来对比一下：

特性	`structuredClone()`	`JSON.parse(JSON.stringify(obj))`
性能	更好	较差
类型支持	更广泛	有限
循环引用	支持	不支持
可转移对象	支持	不支持
错误处理	更健壮	容易出错
代码简洁性	更简洁	较复杂

六、 structuredClone() 的兼容性

structuredClone() 是 ES2022 的新特性，因此在一些老版本的浏览器或 Node.js 环境中可能不支持。在使用之前，最好进行兼容性检查：

if ('structuredClone' in window) {
  // 支持 structuredClone
  const clonedObject = structuredClone(originalObject);
} else {
  // 不支持 structuredClone，使用其他方法
  console.warn('structuredClone is not supported in this environment.');
  // 可以使用 JSON.parse(JSON.stringify(obj)) 作为 fallback
  const clonedObject = JSON.parse(JSON.stringify(originalObject));
}

七、何时使用 structuredClone()，何时使用其他深拷贝方法？

structuredClone() 是深拷贝的首选方法，但在某些情况下，其他方法可能更适合：

当需要拷贝函数或类时: structuredClone() 无法拷贝函数或类，此时可以使用第三方库，例如 Lodash 的 _.cloneDeep()。
当需要自定义拷贝行为时: structuredClone() 的拷贝行为是固定的，如果需要自定义拷贝逻辑，例如只拷贝某些属性，或者对某些属性进行特殊处理，可以使用递归函数或其他自定义方法。
当需要兼容老版本浏览器时: 如果必须兼容不支持 structuredClone() 的浏览器，可以使用 JSON.parse(JSON.stringify(obj)) 作为 fallback，或者使用第三方库。

八、总结

structuredClone() 是 JavaScript 中深拷贝对象的官方标准方法，它具有性能好、类型支持广泛、错误处理健壮等优点。在大多数情况下，structuredClone() 是深拷贝的首选方法。但是，structuredClone() 也有一些限制，需要根据具体情况选择合适的深拷贝方法。

希望今天的讲座能帮助大家更好地理解和使用 structuredClone()。谢谢大家！

发表回复 取消回复

发表回复取消回复