얕은 대 JavaScript의 깊은 복사

JavaScript 객체를 복사하는 것은 간단하지 않습니다. 이 프로세스에서 객체와 참조가 어떻게 작동하는지 이해하는 것은 웹 개발자에게 중요하며 시간을 디버깅하는 시간을 절약 할 수 있습니다. React 또는 VUE에 내장 된 대형 응용 프로그램을 사용할 때 점점 더 중요 해지고 있습니다.

얕은 사본 및 딥 카피는 JavaScript에서 객체 사본을 만드는 방법과 "복사"에서 작성한 데이터를 참조하십시오. 이 기사에서는 이러한 방법의 차이점을 깊이 파고 들고 실제 응용 분야를 탐색하며 사용할 때 발생할 수있는 잠재적 인 함정을 발견 할 것입니다.

키 포인트

javaScript의 얕은 사본은 기존 객체의 속성을 복사하는 새 개체를 만듭니다. 이는 얕은 복제본에서 중첩 된 물체에 대한 수정이 원래 물체 및 기타 얕은 복제본에도 영향을 미친다는 것을 의미합니다.

반면에, 딥 카피는 참조가 아닌 모든 속성과 중첩 된 객체를 포함하여 기존 객체의 정확한 사본을 만듭니다. 이렇게하면 참조를 공유하지 않는 두 개의 개별 객체가 필요할 때 깊은 복사가 도움이되므로 한 객체의 변경이 다른 객체에 영향을 미치지 않도록합니다.

깊은 복제는 데이터 정확도의 이점을 제공하지만 성능 영향, 메모리 소비 증가, 순환 참조 문제, 기능 및 특수 객체 처리 및 구현 복잡성과 같은 몇 가지 단점이있을 수 있습니다. 따라서 각 특정 사용 사례에 대해 깊은 복제가 필요한지 여부를 평가하는 것이 중요합니다.

• "얕은"사본이란 무엇입니까 얕은 사본은 새 개체를 만드는 과정을 말합니다. 새 개체는 속성이 원래 객체와 동일한 숫자 값 또는 객체를 지칭하는 기존 객체의 사본입니다. JavaScript에서는 일반적으로 또는 확장 구문 ()과 같은 방법을 사용하여 달성됩니다. 얕은 사본은 기존 객체 나 값에 대한 새로운 참조 만 생성하며 깊은 사본을 생성하지 않으므로 중첩 된 객체는 여전히 중복되지 않고 참조됩니다.
• 다음 코드 예제를 살펴 보겠습니다. 새로 생성 된 객체 는 연산자를 확장하여 생성 된
의 사본으로, 예상치 못한 결과를 초래합니다.
그러나 정확히 에 무엇이 있는지 봅시다. 특성 및 는 원래 값 (문자열)이므로 해당 값이 복사됩니다. 그러나

속성은 객체의 배열이므로 복사 된 것은 배열 자체가 아니라 해당 배열에 대한 참조입니다.

당신은 엄격한 평등 연산자 ()를 사용하여 이것을 빨리 테스트 할 수 있습니다 (당신이 나를 믿지 않는다면). 객체가 동일한 객체를 지칭하는 경우에만 한 객체는 다른 객체와 동일합니다 (원시 데이터 유형 및 참조 데이터 유형 참조).

속성은 둘 다에서 동일하지만 객체 자체는 동일하지 않습니다.

let zoo = {
  name: "Amazing Zoo",
  location: "Melbourne, Australia",
  animals: [
    {
      species: "Lion",
      favoriteTreat: "?",
    },
    {
      species: "Panda",
      favoriteTreat: "?",
    },
  ],
};

let shallowCopyZoo = { ...zoo };
shallowCopyZoo.animals[0].favoriteTreat = "?";
console.log(zoo.animals[0].favoriteTreat); 
// "?"，而不是 "?"

이것은 코드 기반에서 잠재적 인 문제를 일으킬 수 있으며 큰 수정을 처리 할 때 특히 어렵습니다. 얕은 복제본에서 중첩 된 물체를 수정하면 원래 물체와 다른 얕은 복제본에도 모두 동일한 참조를 공유하기 때문입니다.

딥 카피 <🎜 🎜> 딥 카피는 기존 객체의 정확한 사본 인 새 개체를 만드는 트릭입니다. 여기에는 참조가 아닌 모든 속성과 중첩 된 객체를 복사하는 것이 포함됩니다. 딥 클로닝은 참조를 공유하지 않는 두 개의 개별 객체가 필요할 때 유용하여 한 객체의 변경이 다른 객체에 영향을 미치지 않도록합니다.

프로그래머는 종종 복잡한 응용 프로그램에서 응용 프로그램 상태 객체를 처리 할 때 딥 클로닝을 사용합니다. 이전 상태에 영향을 미치지 않고 새로운 상태 객체를 만드는 것은 응용 프로그램 안정성을 유지하고 실행 취소/레디 기능을 올바르게 구현하는 데 중요합니다.

<<> Deep Copy <🎜 🎜

의 경우

및

를 사용하는 방법 인기 있고 라이브러리가없는 딥 카피 방법은 내장 된 <🎜 🎜> 및 <🎜 🎜

메소드를 사용하는 것입니다.

JSON.stringify() <<> 메소드는 완벽하지 않습니다. 예를 들어, JSON.parse()와 같은 특수 데이터 유형은 문자열로 변환되며 정의되지 않은 값은 무시됩니다. 이 기사의 모든 옵션과 마찬가지로 특정 사용 사례를 기반으로 고려해야합니다.

다음 코드에서는이 메소드를 사용하여 <p> 기능을 만들어 객체를 깊이 복제합니다. 그런 다음 <<> 객체를 복사하고 원래 객체에 영향을 미치지 않고 복사 된 객체를 수정합니다. 이것은 참조를 공유하지 않는 독립적 인 객체를 유지하는 데있어 깊은 복제의 값을 보여줍니다. <code>JSON.stringify() JSON.parse() 깊은 복제를위한 라이브러리 <🎜 🎜> 심층 복제 솔루션을 제공하는 다양한 타사 라이브러리도 있습니다.

<🎜 🎜> lodash 라이브러리의 parse(stringify()) 기능은 루프 참조, 기능 및 특수 객체를 올바르게 처리 할 수 ​​있습니다. Date

<<> jQuery Library의 기능 <🎜

Immer 라이브러리는 React-Redux 개발자를 위해 구축되었으며 객체를 수정하기위한 편리한 도구를 제공합니다. deepCopy playerProfile 바닐라 js 딥 카피 함수 <🎜 🎜> 어떤 이유로 JSON 객체 나 타사 라이브러리를 사용하지 않으려면 바닐라 JavaScript에서 사용자 정의 딥 카피 함수를 만들 수도 있습니다. 이 함수는 객체 속성을 재귀 적으로 반복하고 동일한 속성과 값을 가진 새 객체를 만듭니다.

console.log(zoo.animals === shallowCopyZoo.animals)
// true

console.log(zoo === shallowCopyZoo)
// false

딥 카피의 단점 깊은 복제는 데이터 정확도에 큰 이점을 제공하지만 각 특정 사용 사례에 대해 깊은 복제가 필요한지 여부를 평가하는 것이 좋습니다. 경우에 따라 얕은 복사 또는 객체 참조를 관리하기위한 기타 기술이 더 적절하여 더 나은 성능을 제공하고 복잡성을 줄일 수 있습니다.

성능 영향 : 특히 크거나 복잡한 객체를 다룰 때 깊은 복제는 계산적으로 비쌀 수 있습니다. 깊은 복제 프로세스는 모든 중첩 특성에 반복되므로 응용 프로그램의 성능에 부정적인 영향을 미치는 데 많은 시간이 걸릴 수 있습니다.
1. <:> 메모리 소비 : 딥 카피를 생성하면 모든 중첩 된 객체를 포함하여 전체 객체 계층이 발생합니다. 이로 인해 메모리 사용량이 증가하여 메모리 제한된 환경이나 대규모 데이터 세트를 처리 할 때 문제가 될 수 있습니다.
라운드 참조 : 객체에 원형 참조가 포함되어있을 때 딥 복사는 문제를 일으킬 수 있습니다 (즉, 객체의 속성이 직접 또는 간접적으로 자신을 참조 할 때). 루프 참조는 심층 복사 중에 무한 루프 또는 스택 오버플로 오류를 유발할 수 있으며, 처리하려면 이러한 문제를 피하기 위해 추가 논리가 필요합니다.
, dom elements). 예를 들어, 함수가 포함 된 객체를 심층 복사 할 때 함수에 대한 참조가 복사 될 수 있지만 함수의 폐쇄 및 해당 컨텍스트는 복사되지 않습니다. 마찬가지로, 특수 기능이있는 객체는 깊게 복제 될 때 고유 한 속성과 행동을 잃을 수 있습니다.
3. 구현 복잡성 : 사용자 정의 딥 카피 함수를 작성하는 것은 복잡 할 수 있으며
와 같은 내장 방법은 함수를 올바르게 처리 할 수 ​​없거나 원형 참조 또는 특수 객체를 처리 할 수없는 것과 같은 몇 가지 제한 사항도 있습니다. 깊은 복제를보다 효율적으로 처리하는 Lodash 's
4. 와 같은 타사 라이브러리가 있지만 깊은 복제를 위해 외부 종속성을 추가하는 것이 항상 이상적이지는 않을 수 있습니다. Date RegExp
결론 이 ​​기사를 읽어 주셔서 감사합니다. 얕고 깊은 복제는 초보자가 생각하는 것보다 훨씬 더 복잡합니다. 각 접근 방식에 많은 함정이 있지만 이러한 옵션을 검토하고 고려하는 데 시간이 걸리면 응용 프로그램과 데이터가 원하는 모습을 유지할 수 있습니다.
5. JavaScript (FAQ)의 얕고 깊은 복제에 대한 FAQ
   JavaScript에서 얕은 복제와 깊은 복제의 주요 차이점은 무엇입니까? JSON.parse(JSON.stringify(obj)) 얕은 복제와 깊은 복제의 주요 차이점은 특성을 물체로 처리하는 방식입니다. 얕은 사본에서 복사 된 개체는 원래 객체와 중첩 된 객체에 대한 동일한 참조를 공유합니다. 이는 중첩 된 객체의 변경이 원래 객체와 사본 개체에 반영됨을 의미합니다. 반면에 깊은 복제는 중첩 된 객체의 새로운 인스턴스를 생성합니다. 즉, 복제 된 객체의 중첩 된 물체의 변경은 원래 객체에 영향을 미치지 않습니다. _.cloneDeep() 확장 연산자는 얕은 사본으로 어떻게 작동합니까?
JavaScript의 확장 연산자 (…)는 일반적으로 얕은 복사에 사용됩니다. 한 객체의 모든 열거 가능한 속성을 다른 객체에 복사합니다. 그러나 첫 번째 레벨 속성과 중첩 된 객체에 대한 참조 만 복사합니다. 따라서 중첩 된 물체의 변경은 원래 객체와 복사 된 객체에 영향을 미칩니다.

심층 복사에 JSON 방법을 사용할 수 있습니까?

예, JSON 메소드를 사용하여 JavaScript에서 깊은 복사를 수행 할 수 있습니다. 와

메소드의 조합은 객체의 깊은 사본을 만듭니다.

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