JS中对象深拷贝：structuredClone()

《星球大战》中克隆人军队

展开操作符（Spreading）是JavaScript中复制对象的常用手段：

• 展开数组字面量 复制一个数组

• 展开对象字面量 复制一个对象

展开有个明显的缺点，复制的结果是浅拷贝，顶层被复制，但属性值是引用数据。

structuredClone() 是一个新功能，现在已经被大多数浏览器、Node.js 和 Deno 支持。它可以创建对象的深拷贝。下面是对它的研究分享，阅读时间约为 5 分钟。

目录

1. 在哪里可以使用structuredClone()？  

2. 通过展开复制对象的浅拷贝  

3. 使用structuredClone()深度复制对象

4. 哪些值可以structuredClone()复制？  

4.1 大多数内置值都可以复制  

4.2 某些内置值无法复制  

4.3 自定义类的实例变成普通对象  

4.4 复制对象的特性属性  

5. 参考资料

---

1. 在哪里可以使用structuredClone()？  

尽管structuredClone()是 ECMAScript 的一部分，但它已被添加到许多平台中（并且会更快更广泛的普及）：

• Chrome 98

• Safari 137 (Technology Preview Release)

• Firefox 94

• Node.js 17.0

• Deno 1.14

提示：

• structuredClone()在 WebWorkers 中支持并不完全，具体可以查看MDN 浏览器兼容性表。

• 在不支持的平台上structuredClone，可以使用polyfill代替。

2. 通过展开复制对象的浅拷贝  

在 JavaScript 中复制数组和普通对象的一种常见方法是通过展开。比如展开对象代码：

const obj = {
       id: 'abcd1234', values: ['a', 'b']};
const clone1 = {
       ...obj};

唉，这是使用频率非常高的浅拷贝方式。一方面，因为clone1.id是一个复制，因此更改它不会更改obj：

clone1.id = 'yes';
assert.equal(obj.id, 'abcd1234');

另一方面，数组 inclone1.values与 共享obj。如果我们改变它，同时也会改变obj：

clone1.values.push('x');
assert.deepEqual(
  clone1, {
       id: 'yes', values: ['a', 'b', 'x'