structuredClone()方法使用结构化克隆算法将给定的值进行深拷贝或值的转移。
优势：
- 克隆无限嵌套的对象和数组
- 克隆循环引用
- 克隆广泛的 JavaScript 类型，例如
Date、Set、Map、Error、RegExp、ArrayBuffer、Blob、File、ImageData，以及许多其他类型 - 转移任何可转移对象b
不支持
-
函数
-
DOM节点
-
属性描述符、设置器和获取器
-
对象原型
使用方法1——深拷贝
const a = {
b: '1'
}
const c = structuredClone(a)
c.b = '2'
console.log(a.b) // 1
console.log(c.b) // 2
使用方法2——转移值
const obj = {
val: 1
}
const obj2 = structuredClone(obj, { transfer: [obj.val] })
console.log(obj) // {}
console.log(obj2) // { val: 1 }
Q & A
1.Vue3框架下拷贝ref响应式的对象时报错
# 报错信息
Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned.
原因：
Vue3中的ref会使用Proxy包裹对象的每一层每一个元素，所以在structuredClone时，实际上对象是一个Proxy包裹下的代理对象，导致存在无法克隆的元素
解决方案：
使用 toRaw()方法获取到剔除响应式的源对象后再进行克隆
const obj = ref({ a: 1 })
const copy = structuredClone(toRaw(obj))
评论区