> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 얕은 복사와 깊은 복사

JavaScript의 얕은 복사와 깊은 복사

WBOY
풀어 주다: 2024-07-26 20:45:00
원래의
799명이 탐색했습니다.

Shallow Copy vs Deep Copy in JavaScript

JavaScript로 작업할 때 객체와 배열을 효과적으로 조작하려면 얕은 복사와 깊은 복사의 차이점을 이해하는 것이 필수적입니다. 이러한 용어의 의미와 코드에서 각 유형의 사본을 구현하는 방법을 살펴보겠습니다.

얕은 사본
얕은 복사본은 원본과 동일한 값을 보유하는 새 개체나 배열을 만듭니다. 그러나 원본에 중첩된 개체나 배열이 포함된 경우 얕은 복사본은 구조 자체가 아닌 이러한 중첩된 구조에 대한 참조만 복사합니다. 즉, 복사된 구조의 중첩된 개체나 배열을 변경하면 원본에도 영향을 미칩니다.

얕은 복사 방법의 예:

  1. 확산 연산자({...})
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
로그인 후 복사

여기서,shallowCopy는 새로운 객체이지만,shallowCopy.b는 여전히 Original.b와 동일한 객체를 참조합니다.

2.Object.할당()

const shallowCopy = Object.assign({}, original);
로그인 후 복사
  1. 배열 슬라이스 방법
const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();
로그인 후 복사

딥 카피
전체 복사는 중첩된 모든 개체 및 배열을 포함하여 원본의 완전하고 독립적인 복제본인 새 개체 또는 배열을 생성합니다. 딥 카피의 변경 사항은 원본에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다.

딥 카피 방법의 예:

  1. JSON.stringify() 및 JSON.parse()
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
로그인 후 복사

이 메서드는 개체를 JSON 문자열로 직렬화한 다음 다시 새 개체로 구문 분석합니다. 단, 함수, 정의되지 않은 참조, 순환 참조는 처리하지 않습니다.

2.재귀함수

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') return obj;

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

로그인 후 복사
  1. StructuredClone()(최신 JavaScript 환경)
const deepCopy = structuredClone(original);
로그인 후 복사

각 용도

  • 얕은 사본: 중첩된 구조가 없는 단순한 객체나 배열에 적합합니다. 더 빠르고 메모리도 적게 사용합니다. 중첩된 개체에 대한 변경 사항이 원본과 복사본 모두에 반영되어야 하는 빠른 복사본이 필요할 때 사용하세요.

  • 딥 카피: 복잡한 객체나 중첩 구조가 있는 배열에 필요합니다. 복사본에 대한 변경 사항이 원본에 영향을 미치지 않도록 보장합니다. 완전히 독립된 클론이 필요할 때 사용하세요.

이러한 차이점을 이해하면 의도하지 않은 공유 참조로 인해 발생하는 버그를 방지하고 애플리케이션의 데이터 무결성을 보장하는 데 도움이 됩니다

위 내용은 JavaScript의 얕은 복사와 깊은 복사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿