JavaScript 개체의 딥 카피를 위한 환상적인 새로운 방법

JavaScript에는 JavaScript 개체의 전체 복사에 대한 좋은 방법이 있습니다. - structuredClone() .

전역structuredClone() 방법은 구조화된 복제 알고리즘을 사용하여 주어진 값의 깊은 복제를 생성합니다.

이 방법을 사용하면 원래 값의 양도 가능한 개체를 새 개체에 복제하는 대신 전송할 수 있습니다. 전송된 개체는 원래 개체에서 분리되어 새 개체에 연결됩니다. 더 이상 원본 개체에서 액세스할 수 없습니다.

structuredClone(value)
structuredClone(value, transferables)

이 함수는 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

양도

Transferable objects (만) 선택적 매개 변수의 전송 값을 사용하여 복제된 개체에서 복제하는 대신 전송할 수 있습니다. 전송하면 원래 개체를 사용할 수 없게 됩니다.

다음 코드는 배열을 복제하고 기본 리소스를 새 객체로 전송하는 방법을 보여줍니다. 돌아오면 원래 uInt8Array.buffer가 지워집니다.

var uInt8Array = new Uint8Array(1024 * 1024 * 16); // 16MB
for (var i = 0; i < uInt8Array.length; ++i) {
  uInt8Array[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] });

해킹을 즐기세요!~!