您知道吗,JavaScript 现在有一种本地内置的方法可以进行对象的深层复制? 没错,这个 structuredClone
函数内置于 JavaScript 运行时中:
jsx
const calendarEvent = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}
// 😍
const copied = structuredClone(calendarEvent)
您是否注意到在上面的示例中我们不仅复制了对象,还复制了嵌套数组,甚至 Date 对象?
一切都按照预期工作:
js
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
等等 - 转移任何可转移对象(Transfer any transferable objects )
例如,下边这种代码也会按预期工作:
js
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
// ✅ All good, fully and deeply copied!
const clonedSink = structuredClone(kitchenSink)
为什么不只用对象展开呢?
值得注意的是,我们正在谈论的是深拷贝。如果您只需要进行浅拷贝,即不拷贝嵌套对象或数组的副本,那么我们可以只进行对象展开:
jsx
const simpleEvent = {
title: "Builder.io Conf",
}
// ✅ no problem, there are no nested objects or arrays
const shallowCopy = {...calendarEvent}
或者使用下边的任意一个方法
jsx
const shallowCopy = Object.assign({}, simpleEvent)
const shallowCopy = Object.create(simpleEvent)
但是一旦我们嵌套了内容,我们就会遇到麻烦:
jsx
const calendarEvent = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}
const shallowCopy = {...calendarEvent}
// 🚩 oops - we just added "Bob" to both the copy *and* the original event
shallowCopy.attendees.push("Bob")
// 🚩 oops - we just updated the date for the copy *and* original event
shallowCopy.date.setTime(456)
正如您所看到的,我们没有获得该对象的完整副本。
嵌套日期和数组仍然是两者之间的共享引用,如果我们想编辑那些认为我们只是更新复制的calendarEvent的内容,这可能会给我们带来重大问题。
为什么不使用 JSON.parse(JSON.stringify(x))
?
啊,是的,这是个常用的技巧,并且具有出色的性能,但有一些 structuredClone
可以解决的缺点。
以此为例:
jsx
const calendarEvent = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}
// 🚩 JSON.stringify converted the `date` to a string
const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))
如果我们记录 problematicCopy
,我们会得到:
jsx
{
title: "Builder.io Conf",
date: "1970-01-01T00:00:00.123Z"
attendees: ["Steve"]
}
这不是我们想要的! date
应该是 Date
对象,而不是字符串。
发生这种情况是因为 JSON.stringify
只能处理基本对象、数组和原子类型。任何其他类型都可以以难以预测的方式处理。例如,日期被转换为字符串。而 Set
只是转换为 {}
。
JSON.stringify
甚至完全忽略某些内容,例如 undefined
或函数。
例如,如果我们使用此方法复制 kitchenSink
示例:
jsx
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))
会得到:
jsx
{
"set": {},
"map": {},
"regex": {},
"deep": {
"array": [
{}
]
},
"error": {},
}
哎,是的,我们必须删除最初为此使用的循环引用,因为 JSON.stringify
如果遇到其中之一,只会抛出错误。
So while this method can be great if our requirements fit what it can do, there is a lot that we can do with structuredClone
(aka everything above that we failed to do here) that this method cannot.
因此,如果我们的要求满足它的条件,这个方法会很棒,但我们可以用 structuredClone
做很多事情(也就是上面我们在这里未能做的事情),而这个方法却做不到。
为什么不 使用Lodash 的 _.cloneDeep
?
目前,Lodash 的 cloneDeep
函数已经是解决这个问题的一个非常常见的解决方案。
事实上,这确实按预期工作:
jsx
import cloneDeep from 'lodash/cloneDeep'
const calendarEvent = {
title: "Builder.io Conf",
date: new Date(123),
attendees: ["Steve"]
}
// ✅ All good!
const clonedEvent = structuredClone(calendarEvent)
但是,这里只有一个警告。根据我的 IDE 中的导入成本扩展,它会打印我导入的任何内容的 kb 成本,这个函数压缩后总共有 17.4kb(压缩后为 5.3kb):
假设您只导入该函数。如果您以更常见的方式导入,却没有意识到 Tree Shaking 并不总是按您希望的方式工作,您可能会意外地仅针对这一功能导入多达 25kb 的数据 😱
虽然这对任何人来说都不会是世界末日,但在我们的例子中根本没有必要,尤其是当浏览器已经内置 structuredClone
时。
structuredClone
不能克隆什么
函数不能被克隆
他们将抛出 DataCloneError
异常:
jsx
// 🚩 Error!
structuredClone({ fn: () => { } })
DOM 节点
还会抛出 DataCloneError
异常:
jsx
// 🚩 Error!
structuredClone({ el: document.body })
Property descriptors, setters, and getters
类似的类似元数据的功能也不会被克隆。
例如,使用 getter 时,会克隆结果值,但不会克隆 getter 函数本身(或任何其他属性元数据):
jsx
structuredClone({ get foo() { return 'bar' } })
// Becomes: { foo: 'bar' }
Object prototypes
原型链不会被遍历或重复。因此,如果您克隆 MyClass
的实例,则克隆的对象将不再被认为是此类的实例(但此类的所有有效属性都将被克隆)
jsx
class MyClass {
foo = 'bar'
myMethod() { /* ... */ }
}
const myClass = new MyClass()
const cloned = structuredClone(myClass)
// Becomes: { foo: 'bar' }
cloned instanceof myClass // false
Full list of supported types
更简单地说,以下列表中未列出的任何内容都无法克隆:
Array
, ArrayBuffer
, Boolean
, DataView
, Date
, Error
types (those specifically listed below), Map
, Object
but only plain objects (e.g. from object literals), Primitive types, except symbol
(aka number
, string
, null
, undefined
, boolean
, BigInt
), RegExp
, Set
, TypedArray
Error types 错误类型
Error
, EvalError
, RangeError
, ReferenceError
, SyntaxError
, TypeError
, URIError
Web/API types
AudioData
, Blob
, CryptoKey
, DOMException
, DOMMatrix
, DOMMatrixReadOnly
, DOMPoint
, DomQuad
, DomRect
, File
, FileList
, FileSystemDirectoryHandle
, FileSystemFileHandle
, FileSystemHandle
, ImageBitmap
, ImageData
, RTCCertificate
, VideoFrame
浏览器和运行时支持
基本上所有主流浏览器都支持 structuredClone
,甚至 Node.js 和 Deno。
请注意 Web Workers 的支持更有限的警告:
Source: MDN 来源:MDN
结论
虽然已经等了很长时间了,但我们现在终于有了 structuredClone
来让 JavaScript 中的深度克隆对象变得轻而易举。