structuredClone 深度克隆 用法介绍

127 阅读1分钟

全局的 structuredClone()  方法使用结构化克隆算法将给定的值进行深拷贝

语法

structuredClone(value)
structuredClone(value, { transfer })

参数

value 被克隆的对象。可以是任何结构化克隆支持的类型

transfer(可选) 是一个可转移对象的数组,里面的  并没有被克隆,而是被转移到被拷贝对象上。

返回值

返回值是原始深拷贝

这个函数可以用来进行深拷贝 JavaScript 变量。 也支持循环引用,如下所示:

// 创建一个具有值和自身循环引用的对象
const original = { name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone(original);

console.assert(clone !== original); // 对象不相同
console.assert(clone.name === "MDN"); // 有相同的属性
console.assert(clone.itself === clone); // 循环引用被保留

可选参数transfer

使用可选参数 transfer 里的值,可以使可转移对象(仅)被传递,不被克隆。 传输导致原始对象(里的属性)无法继续使用。

以下演示了如何把一个数组的属性转义到新对象。 返回结果时,原始对象里的 uInt8Array.buffer 会被清除掉。

var uInt8Array = new Uint8Array(1024 * 1024 * 16); // 16MB 创建一个数据
for (var i = 0; i < uInt8Array.length; ++i) { //给数据赋值
  uInt8Array[i] = i;
}
//使用structuredClone对原数据的buffer进行转移,而不是复制克隆
const transferred = structuredClone(uInt8Array, {
  transfer: [uInt8Array.buffer],
});
//uInt8Array指向的数据会丢失,
console.log(uInt8Array.byteLength); // 0  

MDN structuredClone