前端开发中容易被忽略的 structuredClone()

在 JavaScript 开发中，经常需要复制对象。

最常见的方式是使用展开运算符，但它只能实现浅拷贝。当对象存在多层嵌套时，修改副本可能会影响原对象。

这时候可以使用原生提供的 structuredClone()。

1. 浅拷贝的问题

const original = {
  name: 'Tom',
  profile: {
    age: 20
  }
}

const copy = { ...original }

copy.profile.age = 30

console.log(original.profile.age) // 30

因为展开运算符只复制第一层属性，嵌套对象仍然共享引用。

2. 使用 structuredClone()

const original = {
  name: 'Tom',
  profile: {
    age: 20
  }
}

const copy = structuredClone(original)

copy.profile.age = 30

console.log(original.profile.age) // 20

structuredClone() 可以实现真正的深拷贝，不需要手动递归处理嵌套对象。

3. 支持循环引用

传统的 JSON 序列化方式无法处理循环引用：

const obj = {
  name: 'Tom'
}

obj.self = obj

// 会抛出异常
JSON.stringify(obj)

而 structuredClone() 可以正常处理：

const copy = structuredClone(obj)

console.log(copy.self === copy) // true

4. 注意事项

structuredClone() 并不是万能的深拷贝方案。

它支持：

• 普通对象和数组
• Date
• Map 和 Set
• ArrayBuffer
• 循环引用

但不支持：

• 函数
• Symbol 值
• DOM 节点
• WeakMap 和 WeakSet

此外，普通对象的原型链和属性描述符不会被完整保留。

总结

structuredClone() 是现代 JavaScript 中非常实用的深拷贝工具。

相比 JSON.parse(JSON.stringify())，它支持更多数据类型，也能正确处理循环引用。

在处理表单数据、复杂配置对象以及状态副本时，可以优先考虑使用它。

不过，如果只是简单对象的浅拷贝，展开运算符依然是更轻量的选择。