JavaScript에서 객체 딥 클론

Jan 31 2023

개체의 전체 복제본은 중첩된 개체를 포함하여 모든 속성의 완전히 별도의 복사본이 있는 새 개체입니다. 이는 첫 번째 수준 속성만 복사되고 중첩된 개체가 복사되는 대신 참조되는 얕은 복제와 다릅니다.

JavaScript에서 개체의 깊은 복제를 수행하는 방법에는 여러 가지가 있지만 하나만이 가장 좋습니다.

JSON.parse 및 JSON.stringify를 사용할 수 있습니까? ❌

JSON.parse(JSON.stringify(obj)) — 이 메서드는 JSON 직렬화를 사용하여 객체의 심층 복제본을 생성합니다. 순환 참조를 포함하지 않는 개체에 대해 작동하지만 개체에 순환 참조가 포함되어 있으면 실패합니다.

const obj = { a: 1, b: { c: 2 } };
const clone = JSON.parse(JSON.stringify(obj));
console.log(clone);
// Output: { a: 1, b: { c: 2 } }

예를 들면 다음과 같습니다.

원천:https://www.builder.io/blog/structured-clone

const calendarEvent = {
  title: "source: https://www.builder.io/blog/structured-clone",
  date: new Date(123),
  attendees: ["Lian"]
}
// JSON.stringify converted the `date` to a string
const copy = JSON.parse(JSON.stringify(calendarEvent))

{
  title: "source: https://www.builder.io/blog/structured-clone",
  date: "1970-01-01T00:00:00.123Z"
  attendees: ["Lian"]
}

Lodash 또는 밑줄 _.cloneDeep() 메서드를 사용할 수 있습니까? ❌ (아니요 선호)

원천:https://www.builder.io/blog/structured-clone

Lodash 또는 underscore _.cloneDeep() 메서드 — 이 라이브러리는 순환 참조 및 기타 엣지 케이스를 처리할 수 있는 딥 클로닝 기능을 제공합니다.

const _ = require('lodash');
const obj = { a: 1, b: { c: 2 } };
const clone = _.cloneDeep(obj);
console.log(clone);
// Output: { a: 1, b: { c: 2 } }

실제로 이것은 예상대로 작동합니다.

import cloneDeep from 'lodash/cloneDeep'
const calendarEvent = {
  title: "source: https://www.builder.io/blog/structured-clone",
  date: new Date(123),
  attendees: ["Lian"]
}
// ✅ All good!
const clonedEvent = structuredClone(calendarEvent)

출처: https://www.builder.io/blog/structured-clone

이 크기 추정치는 함수를 개별적으로 가져오기만을 기반으로 합니다. 트리 쉐이킹이 항상 효과적이지 않을 수 있다는 점을 고려하지 않고 보다 일반적인 가져오기 방법을 선택하면 이 단일 기능에 대해서만 최대 25kb의 데이터를 가져올 수 있습니다.

출처: https://www.builder.io/blog/structured-clone

이 데이터 양은 중요하지 않지만 최신 브라우저에는 이미 Structured Clone 기능이 내장되어 있기 때문에 우리 상황에서는 필요하지 않습니다.

확산 연산자를 사용하여 개체를 딥 복제할 수 있습니까? ❌

아니요, JavaScript의 스프레드 연산자( ...)는 개체의 얕은 복제만 수행합니다. 스프레드 연산자를 사용하여 개체를 복제할 때 중첩된 개체는 복사되지 않고 계속 참조되므로 복제된 개체의 중첩된 개체에 대한 변경 사항은 원래 개체에도 영향을 미칩니다.

예를 들면 다음과 같습니다.

const original = {a: 1, b: {c: 2}};
const clone = {...original};

console.log(clone);
// Output: {a: 1, b: {c: 2}}

clone.b.c = 3;

console.log(original);
// Output: {a: 1, b: {c: 3}}

Object.assign을 사용하여 자바스크립트에서 객체를 딥 복제할 수 있습니까? ❌

아니요, Object.assign()JavaScript의 메서드는 개체의 얕은 복제만 수행합니다. 를 사용하여 Object.assign()개체를 복제할 때 중첩된 개체는 복사되지 않고 여전히 참조되므로 복제된 개체의 중첩된 개체에 대한 변경 사항은 원래 개체에도 영향을 미칩니다.

예를 들면 다음과 같습니다.

const original = {a: 1, b: {c: 2}};
const clone = Object.assign({}, original);

console.log(clone);
// Output: {a: 1, b: {c: 2}}

clone.b.c = 3;

console.log(original);
// Output: {a: 1, b: {c: 3}}

구조화된 클론 ✅

는 structured clone중첩된 개체 및 배열뿐만 아니라 기타 복잡한 데이터 구조를 포함하여 개체의 깊은 복제본을 만드는 프로세스를 나타내는 JavaScript의 개념입니다. 이 알고리즘은 창 개체 간(예: 페이지와 iframe 간) 통신 방법, 브라우저에서 데이터 저장 및 검색을 위한 API, 네트워크 요청의 백그라운드 처리를 위한 API 와 structured clone같은 JavaScript의 여러 API에서 사용됩니다 .postMessageIndexedDBService Workers

이 structured clone알고리즘은 중첩된 객체 및 배열을 포함하여 객체의 모든 속성을 동일한 구조 및 값을 가진 새 객체로 재귀적으로 복사하여 작동합니다. 함수, 날짜, 정규식, 배열 및 객체를 포함하여 광범위한 데이터 유형을 처리할 수 있습니다.

이 structured clone알고리즘은 JavaScript에서 복잡한 데이터 구조의 심층 복제를 생성하기 위한 강력한 도구이며 브라우저 또는 기타 JavaScript 환경에서 데이터에 대한 복잡한 작업을 수행하는 데 자주 사용됩니다.

재귀를 사용한 사용자 정의 구현 — 이 방법에는 재귀를 사용하여 개체의 깊은 복제본을 만드는 함수를 정의하는 작업이 포함됩니다.