const calendarEvent = {   title: "前端修罗场",   date: new Date(123),   attendees: ["Steve"] }  const copied = structuredClone(calendarEvent)

copied.attendees // ["Steve"] copied.date // Date: Wed Dec 31 1969 16:00:00 cocalendarEvent.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: "前端修罗场", } const shallowCopy = {...calendarEvent}

const shallowCopy = Object.assign({}, simpleEvent) const shallowCopy = Object.create(simpleEvent)

const calendarEvent = {   title: "前端修罗场",   date: new Date(123),   attendees: ["Steve"] }  const shallowCopy = {...calendarEvent}  shallowCopy.attendees.push("Bob") shallowCopy.date.setTime(456)

如上所见，我们没有对该对象进行完整复制。

嵌套日期和数组仍然是两者之间的共享引用，如果我们想编辑它们，认为我们只是更新复制的日历事件对象，这可能会导致重大问题。

为什么不使用JSON.parse(JSON.stringify(x)) ?

它实际上是一个很棒的工具，性能令人惊讶，但也有一些structuredClone可以解决的缺点。

举个例子:

const calendarEvent = {   title: "前端修罗场",   date: new Date(123),   attendees: ["Steve"] }  const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))

{   title: "前端修罗场",   date: "1970-01-01T00:00:00.123Z"   attendees: ["Steve"] }

这不是我们想要的 date 格式，因为格式应该是date对象，而不是字符串。

这是因为 JSON.Stringify 只能处理基本对象、数组和基本类型。任何其他类型都可能以难以预测的方式处理。例如，日期被转换为字符串。但是 Set 对象就会被简单地转换为 {}。

同时，JSON.Stringify 甚至会完全忽略某些东西，如 undefined 或 function。

例如，如果我们用这个方法复制下面这个例子:

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": {}, }

可以看到， 这种方法的拷贝出错了。

因此，如果我们的需求适合这个方法，可以用这个方法。但是，我们可以用 structuredClone 做这个方法有很多不能做的事情。

为什么不是 _.cloneDeep?

到目前为止，Lodash 的 cloneDeep 函数是这个问题的一个非常常见的解决方案。事实上，这确实也像预期的那样工作:

import cloneDeep from 'lodash/cloneDeep'  const calendarEvent = {   title: "前端修罗场",   date: new Date(123),   attendees: ["Steve"] }  // ✅  const clonedEvent = structuredClone(calendarEvent)

但是，这里有一个警告。根据我的 IDE 中的导入成本扩展，打印任何我导入函数的成本，这个函数占了 17.4kb` 的大小(5.3kb gzip):

假设你只导入了这个函数。如果改用更常见的方式导入，没有意识到摇树并不总是按希望的方式工作，那么可能会无意中为这个函数导入高达2 5kb 的文件?

什么是 structuredClone 克隆不了的

函数不能被克隆

structuredClone({ fn: () => { } }) // 会抛出一个 DataCloneError 异常

structuredClone({ el: document.body })// 会抛出一个 DataCloneError 异常

structuredClone({ get foo() { return 'bar' } }) // log: { foo: 'bar' }

class MyClass {    foo = 'bar'    myMethod() { /* ... */ } } const myClass = new MyClass()  const cloned = structuredClone(myClass) // log: { foo: 'bar' }  cloned instanceof myClass // false