structuredClone을 사용하여 JavaScript에서 객체의 딥 카피

여기까지 오 셨다면 자바스크립트에서 개체의 전체 복사본을 만들기 위해 + 트릭을 수백 번 사용하셨을 것입니다 . 더 이상 필요하지 않습니다. 원어민이 도와드리겠습니다.JSON.parse()JSON.stringify()structuredClone()

얕은 복사 대 깊은 복사

우선 Shallow Copy와 Deep Copy의 차이점이 무엇인지 기억해 봅시다.

• 얕은 복사: 개체의 첫 번째 수준만 복사됨을 의미합니다 . 더 깊은 수준이 참조됩니다. 스프레드 연산자( …) 또는 를 사용 하여 JavaScript에서 이를 달성할 수 있습니다 Object.assign().
• 전체 복사: 개체의 모든 수준이 복사됨을 의미합니다 . 이것은 개체의 실제 복사본입니다. JSON.parse()+ 를 사용하여 이 작업을 수행할 수 JSON.stringify()있으며 이제 기본 structuredClone().

structuredClone을 사용한 딥 카피

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

이 코드 조각에서 볼 수 있듯이:

• 복제된 객체의 첫 번째 수준에서 속성을 업데이트한 후 원래 속성이 업데이트되지 않습니다 .
• 더 깊은 수준에서 속성을 업데이트한 후 원래 속성은 업데이트되지 않습니다 . 이 경우 더 깊은 수준도 복사되기 때문에 이런 일이 발생합니다.

행복한 코딩!