您是否晓得，当初 JavaScript 中有一种原生的形式能够深拷贝对象？
没错，这个内置于 JavaScript 运行时的structuredClone函数就是这样：
const calendarEvent = { title: "Builder.io大会", date: new Date(123), attendees: ["Steve"]}// const copied = structuredClone(calendarEvent)您是否留神到在下面的例子中，咱们不仅复制了对象，还复制了嵌套数组，甚至还包含 Date 对象？
所有正如预期工作：
copied.attendees // ["Steve"]copied.date // Date: 1969年12月31日16:00:00cocalendarEvent.attendees === copied.attendees // false没错，structuredClone不仅能做到上述性能，还可能：
- 克隆有限嵌套的对象和数组
- 克隆循环援用
- 克隆宽泛的 JavaScript 类型，例如
Date、Set、Map、Error、RegExp、ArrayBuffer、Blob、File、ImageData，以及许多其余类型 - 转移任何可转移对象
例如，甚至以下这种疯狂的状况也能如期工作：
const kitchenSink = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex: /foo/, deep: { array: [ new File(someBlobData, 'file.txt') ] }, error: new Error('Hello!')}kitchenSink.circular = kitchenSink// ✅ 全副良好，齐全而深刻地复制！const clonedSink = structuredClone(kitchenSink)为什么不仅应用对象扩大?
重要的是要留神咱们在议论深度拷贝。如果您只须要进行浅拷贝，也就是不复制嵌套对象或数组的拷贝，那么咱们能够简略地应用对象扩大：
const simpleEvent = { title: "Builder.io大会",}// ✅ 没问题，没有嵌套对象或数组const shallowCopy = {...calendarEvent}甚至如果您更喜爱，能够应用以下形式之一：
const shallowCopy = Object.assign({}, simpleEvent)const shallowCopy = Object.create(simpleEvent)然而一旦咱们有了嵌套项，就会遇到麻烦：
const calendarEvent = { title: "Builder.io大会", date: new Date(123), attendees: ["Steve"]}const shallowCopy = {...calendarEvent}// 哎呀 - 咱们刚刚将“Bob”增加到了复制品*和*原始事件中shallowCopy.attendees.push("Bob")// 哎呀 - 咱们刚刚更新了复制品*和*原始事件的日期shallowCopy.date.setTime(456)如您所见，咱们并没有齐全复制这个对象。
嵌套的日期和数组依然是两者之间的共享援用，如果咱们想要编辑这些，认为咱们只是在更新复制的日历事件对象，这可能会导致咱们遇到重大问题。
为什么不必JSON.parse(JSON.stringify(x))?
啊，是的，这个技巧。实际上这是一个很好的办法，而且出乎意料地高效，但structuredClone解决了它的一些毛病。
以此为例：
const calendarEvent = { title: "Builder.io大会", date: new Date(123), attendees: ["Steve"]}// JSON.stringify 将`date`转换为了字符串const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))如果咱们记录problematicCopy，咱们会失去：
{ title: "Builder.io大会", date: "1970-01-01T00:00:00.123Z" attendees: ["Steve"]}这不是咱们想要的！date应该是一个Date对象，而不是一个字符串。
这是因为JSON.stringify只能解决根本的对象、数组和原始类型。任何其余类型都以难以预测的形式解决。例如，日期被转换为字符串。然而Set简略地转换为{}。
JSON.stringify甚至齐全疏忽某些货色，如undefined或 函数。
例如，如果咱们用这种办法复制咱们的kitchenSink示例：
const kitchenSink = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex: /foo/, deep: { array: [ new File(someBlobData, 'file.txt') ] }, error: new Error('Hello!')}const veryProblematicCopy = JSON.parse(JSON.stringify(kitchenSink))咱们会失去：
{ "set": {}, "map": {}, "regex": {}, "deep": { "array": [ {} ] }, "error": {},}呃！
哦，是的，咱们不得不移除咱们最后领有的循环援用，因为JSON.stringify如果遇到其中的一个，就会简略地抛出谬误。
因而，尽管如果咱们的需要适宜它能做的事件，这种办法可能很好，但structuredClone（也就是下面咱们未能做到的所有事件）能做许多这种办法不能做的事件。
为什么不必_.cloneDeep?
到目前为止，Lodash 的cloneDeep函数始终是这个问题的一个十分常见的解决方案。
实际上，这的确如预期工作：
import cloneDeep from 'lodash/cloneDeep'const calendarEvent = { title: "Builder.io大会", date: new Date(123), attendees: ["Steve"]}const clonedEvent = cloneDeep(calendarEvent)然而，这里只有一个正告。依据我的 IDE 中的 Import Cost 扩大，它打印了我导入的任何货色的 kb 老本，这一个性能的老本为整整 17.4kb压缩后的大小（5.3kb gzip 压缩后）：
而这是假如您仅导入了那个性能。如果您以更常见的形式导入，没有意识到 tree shaking 并不总是依照您心愿的形式工作，您可能意外地仅为这一个性能导入多达 25kb
尽管这对任何人来说都不会是世界末日，但在咱们的案例中，这基本不是必要的，不是在浏览器中曾经内置了structuredClone的状况下。
什么是structuredClone不能克隆
函数不能被克隆
它们会抛出一个DataCloneError异样：
// 谬误！structuredClone({ fn: () => { } })DOM 节点
也会抛出一个DataCloneError异样：
// 谬误！structuredClone({ el: document.body })属性描述符、设置器和获取器
以及相似的元数据个性都不会被克隆。
例如，对于一个获取器，克隆的是后果值，而不是获取器函数自身（或任何其余属性元数据）：
structuredClone({ get foo() { return 'bar' } })// 变成了：{ foo: 'bar' }对象原型
不会遍历或复制原型链。因而，如果您克隆了MyClass的一个实例，克隆的对象将不再被辨认为这个类的实例（但这个类的所有无效属性将被克隆）：
class MyClass { foo = 'bar' myMethod() { /* ... */ }}const myClass = new MyClass()const cloned = structuredClone(myClass)// 变成了：{ foo: 'bar' }cloned instanceof myClass // false反对的类型全列表
更简略地说，上面列表中未提到的任何货色都不能被克隆：
JS 内建类型
Array、ArrayBuffer、Boolean、DataView、Date、Error类型（上面具体列出的那些）、Map、Object但仅限于一般对象（例如，来自对象字面量）、原始类型，除了symbol（即number、string、null、undefined、boolean、BigInt）、RegExp、Set、TypedArray
谬误类型
Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError
Web/API 类型
AudioData、Blob、CryptoKey、DOMException、DOMMatrix、DOMMatrixReadOnly、DOMPoint、DomQuad、DomRect、File、FileList、FileSystemDirectoryHandle、FileSystemFileHandle、FileSystemHandle、ImageBitmap、ImageData、RTCCertificate、VideoFrame
浏览器和运行时反对
这里是最好的局部 - structuredClone在所有次要浏览器中都失去反对，甚至包含 Node.js 和 Deno。
只需注意 Web Workers 的反对较为无限的正告：
起源：MDN
论断
通过漫长的期待，咱们终于当初有了structuredClone，使得在 JavaScript 中深度克隆对象变得轻而易举。
- 原文链接：https://www.builder.io/blog/structured-clone