JavaScript使用structuredClone深拷贝Web最新的API

  • Post author:
  • Post category:java




结构化克隆 深拷贝

全局**structuredClone()**方法使用结构化克隆算法创建给定值的深度克隆。

该方法还允许将原始值中的可转移对象转移而不是克隆到新对象。转移对象与原始对象分离并附加到新对象;它们不再可以在原始对象中访问。



句法

structuredClone(value)
structuredClone(value, transferables)


参数


value

要克隆的对象。这可以是任何

结构化可克隆类型。


transferables

可选的

其中的可

转移对象

数组value将被移动而不是克隆到返回的对象中。


返回值


返回的值是原始的深层副本value。


例外


DataCloneError DOMException

如果输入值的任何部分不可序列化,则抛出该异常。



描述



此函数可用于

深度复制

JavaScript 值。它还支持循环引用,如下所示:

// Create an object with a value and a circular reference to itself.
const original = { name: "MDN" };
original.itself = original;

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

console.assert(clone !== original); // the objects are not the same (not same identity)
console.assert(clone.name === "MDN"); // they do have the same values
console.assert(clone.itself === clone); // and the circular reference is preserved



传参

transfer使用可选参数的值,可传输对象(仅)可以在克隆对象中传输而不是复制。传输使原始对象无法使用。

注意:这可能有用的一个场景是在保存缓冲区之前异步验证缓冲区中的某些数据。为避免在保存数据之前修改缓冲区,您可以克隆缓冲区并验证该数据。如果您还传输数据,则任何修改原始缓冲区的尝试都将失败,从而防止其意外误用。

以下代码显示了如何克隆一个数组并将其底层资源转移到新对象。返回时,原件uInt8Array.buffer将被清除。

// 16MB = 1024 * 1024 * 16
const uInt8Array = Uint8Array.from({ length: 1024 * 1024 * 16 }, (v, i) => i); 

const transferred = structuredClone(uInt8Array, { transfer: [uInt8Array.buffer] });
console.log(uInt8Array.byteLength);  // 0

您可以克隆任意数量的对象并传输这些对象的任何子集。例如,下面的代码arrayBuffer1将从传入的值传输,但不是arrayBuffer2.

const transferred = structuredClone(
   { x: { y: { z: arrayBuffer1, w: arrayBuffer2 } } },
   { transfer: [arrayBuffer1] });