웹 프론트엔드 JS 튜토리얼 JS에서 깊은 복사와 얕은 복사의 차이점은 무엇입니까

JS에서 깊은 복사와 얕은 복사의 차이점은 무엇입니까

Feb 18, 2024 am 10:26 AM
js 얕은 사본 딥 카피

JS에서 깊은 복사와 얕은 복사의 차이점은 무엇입니까

JS에서 전체 복사와 얕은 복사의 차이점은 무엇인가요? 구체적인 코드 예제가 필요합니다

JavaScript에서 객체를 복사하는 방법에는 얕은 복사와 깊은 복사 두 가지가 있습니다. 얕은 복사본은 객체의 참조 주소만 복사하는 반면, 깊은 복사본은 완전히 독립적인 복사본을 만듭니다.

얕은 복사는 원본 개체의 참조 주소를 새 개체에 복사하는 것입니다. 그들은 동일한 메모리 공간을 가리킵니다. 개체 중 하나의 속성이 수정되면 다른 개체의 해당 속성도 수정됩니다. 이는 동일한 메모리 주소를 공유하기 때문입니다.

Deep copy는 새로운 객체를 생성하고 원본 객체의 모든 속성을 새 객체에 하나씩 복사하는 것입니다. 새 객체와 원본 객체는 서로 영향을 미치지 않습니다. 한 개체의 속성을 수정하더라도 다른 개체의 속성은 영향을 받지 않습니다.

아래에서는 얕은 복사와 깊은 복사의 차이점을 구체적인 코드 예시를 통해 설명하겠습니다.

먼저 얕은 복사본의 예를 살펴보겠습니다.

let obj1 = {name: "Alice", age: 20};
let obj2 = obj1;

obj1.age = 21; 

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 21}
로그인 후 복사

위 코드에서는 obj1obj2에 할당하여 얕은 복사본을 구현합니다. obj1age 속성이 수정되면 obj2age 속성도 수정됩니다. 같은 메모리 주소. obj1赋值给obj2实现了一个浅拷贝。当修改obj1age属性时,obj2age属性也被修改了,这是因为它们指向同一块内存地址。

接下来,我们来看一个深拷贝的示例:

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    
    let clone = Array.isArray(obj) ? [] : {};
    
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    
    return clone;
}

let obj1 = {name: "Alice", age: 20};
let obj2 = deepClone(obj1);

obj1.age = 21;

console.log(obj1); // {name: "Alice", age: 21}
console.log(obj2); // {name: "Alice", age: 20}
로그인 후 복사

在上述代码中,我们定义了一个deepClone函数,用于实现深拷贝。该函数首先判断传入的参数是否为null或不是对象类型,如果是则直接返回,否则创建一个与传入对象类型相同的空对象clone。然后通过遍历原对象的属性,递归调用deepClone函数对每个属性进行深拷贝,并赋值给相应的clone属性。最后返回新对象clone

通过使用deepClone函数,我们实现了对obj1的深拷贝。即使修改了obj1age属性,但obj2age

다음으로 딥 카피의 예를 살펴보겠습니다.

rrreee

위 코드에서는 딥 카피를 구현하기 위해 deepClone 함수를 정의했습니다. 이 함수는 먼저 전달된 매개변수가 객체 유형인지 여부를 확인합니다. 그렇다면 직접 반환하고, 그렇지 않으면 전달된 객체와 동일한 유형의 빈 객체 clone을 생성합니다. 그런 다음 원본 객체의 속성을 순회하면서 deepClone 함수를 재귀적으로 호출하여 각 속성을 심층 복사하고 해당 clone 속성에 할당합니다. 마지막으로 새 개체 clone이 반환됩니다. 🎜🎜deepClone 기능을 사용하여 obj1의 전체 복사본을 구현합니다. obj1age 속성이 수정되더라도 obj2age 속성은 완전히 2이므로 변경되지 않습니다. 독립된 객체. 🎜🎜결론적으로 얕은 복사는 객체의 참조 주소만 복사하는 반면, 깊은 복사는 완전히 독립적인 복사본을 만듭니다. Deep Copy는 복사 객체를 수정할 때 원본 객체가 영향을 받지 않도록 보장하며 중첩된 구조를 가진 객체를 복사하는 데 적합합니다. 실제 개발 시 Deep Copy는 큰 성능 오버헤드를 초래할 수 있으므로 실제 상황에 맞는 적절한 복사 방법을 선택하는 것이 필요하다는 점을 참고하시기 바랍니다. 🎜

위 내용은 JS에서 깊은 복사와 얕은 복사의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법 Nov 21, 2023 am 10:00 AM

JS 및 Baidu Maps를 사용하여 지도 이동 기능을 구현하는 방법

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법

JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법 JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법 Nov 21, 2023 am 10:53 AM

JS 및 Baidu Maps를 사용하여 지도 다각형 그리기 기능을 구현하는 방법

JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법 JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법 Nov 21, 2023 am 11:11 AM

JS와 Baidu Map을 활용하여 지도 클릭 이벤트 처리 기능을 구현하는 방법

new 연산자는 js에서 무엇을 합니까? new 연산자는 js에서 무엇을 합니까? Nov 13, 2023 pm 04:05 PM

new 연산자는 js에서 무엇을 합니까?

See all articles