>  기사  >  웹 프론트엔드  >  JavaScript의 딥 카피 이해

JavaScript의 딥 카피 이해

Patricia Arquette
Patricia Arquette원래의
2024-10-06 06:19:02327검색

JavaScript는 소개가 필요 없으며 다양한 기능을 갖춘 강력한 언어입니다. 그러나 JavaScript를 사용해 본 적이 있다면 아마도 몇 가지 특이한 동작을 발견했을 것입니다. 그 중 하나는 특히 객체 작업 시 JavaScript가 변수 복사본을 처리하는 방법입니다. 이번 글에서는 딥 카피의 개념과 이것이 프로그램에서 데이터를 복제할 때 예상치 못한 문제를 피하는 데 어떻게 도움이 되는지 살펴보겠습니다.

변수 복사본을 만들 때 JavaScript는 새로운 메모리 공간을 만들고 거기에 복사된 값을 저장합니다. 그러면 새 변수는 이 새 메모리 공간을 가리킵니다. 예:


x = 5;
y = x;


yx와 동일한 값을 갖는 새로운 메모리 공간을 가리키고 있습니다. 즉, 시각적으로 5 입니다. 다음과 같습니다:

Comprendiendo la copia profunda en JavaScript

위 개념은 기본 값에만 적용되며 객체의 경우에는 다릅니다. 다음과 같은 두 개의 개체가 있다고 상상해 보세요.


let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;


위의 예에서 b에는 예상한 대로 자체 메모리 공간이 없습니다. 대신 aa가 저장된 메모리 공간을 가리킵니다.

Comprendiendo la copia profunda en JavaScript

이러한 행동으로 인해 어떤 문제가 발생할 수 있나요? 기본적으로 a 또는 b에서 필드를 변경하면 두 변수가 모두 변경됩니다. 다음 코드를 실행하여 직접 확인해 보세요.


let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

b.name = 'Morty';

console.log('a: ', a); // a:  { name: 'Morty', lastName: 'Sanchez' }
console.log('b: ', b); // b:  { name: 'Morty', lastName: 'Sanchez' }


이것에 대한 해결책은? b가 가리키는 새로운 독립 메모리 공간에 a의 값을 저장하려면 deep copy를 해야 합니다.


const b = JSON.parse(JSON.stringify(a));


이런 방식으로 형식을 Object에서 JSON으로 변경하여 JavaScript가 새로운 메모리 공간을 생성하도록 강제하고 있습니다. 이 작업은 stringify 메서드를 사용하여 수행된 다음 자체 메모리 공간이 있는 JSON이 parse 메서드를 사용하여 객체로 다시 변환되므로 두 변수는 완전히 독립적으로 유지됩니다.

이런 이상한 행동을 겪은 적이 있나요? 댓글로 알려주시면 기꺼이 읽어드리겠습니다!

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.