자바스크립트에서 깊은 복사와 얕은 복사의 차이점은 무엇입니까?

JavaScript에서 얕은 복사본은 원본 데이터의 메모리 주소만 복사합니다. 이는 동일한 주소를 가리키는 두 개의 데이터 포인터와 동일합니다. 동일한 주소에 대한 딥 카피 포인트. 하나의 요소가 변경되더라도 다른 주소에는 영향을 미치지 않습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서 Deep Copy와 Shallow Copy의 차이점은 무엇인가요?

Shallow Copy와 Deep Copy를 살펴보기 전에 먼저 힙과 스택의 개념을 이해해 봅시다

힙과 스택은 모두 메모리에서 나누어 저장하는 영역입니다. 스택에는 자동으로 할당된 메모리 공간이 있으며, 이는 시스템에 의해 자동으로 해제됩니다. 힙은 동적으로 할당된 메모리이며 크기는 가변적이며 자동으로 해제되지 않습니다.

그럼 기본 데이터 유형 및 참조 데이터 유형(복합 데이터 유형이라고도 함)을 살펴보겠습니다.

1. 기본 유형: 문자열, 숫자, 부울, 정의되지 않음, 기호(ES6의 새로운 기능, 고유한 값을 나타냄) 유형 값은 메모리에서 고정된 크기를 차지하고 스택 메모리에 저장됩니다.

2. 참조 유형: 객체, 배열, 날짜, 함수 등 참조 유형의 값은 객체이며 힙 메모리에 저장됩니다.

어둡고 얕은 복사본의 개념

참고: 어두운 복사본과 얕은 복사본의 차이점은 배열 및 개체와 같은 복잡한 개체에만 적용됩니다.

1. 얕은 복사: 원본 데이터의 메모리 주소만 복사합니다. 이는 동일한 주소를 가리키는 두 개의 데이터 포인터에 해당합니다.

2. 딥 카피: 두 데이터는 서로 다른 주소를 가리키며 데이터 요소가 변경되더라도 서로 영향을 미치지 않습니다.

예제 연구

1. 얕은 복사

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr;
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

작업 결과: arrB 배열 요소가 변경됨에 따라 arr 배열 요소도 변경됩니다.

2. Deep Copy(깊은 복사의 첫 번째 레이어만 수행됨)

참고: Deep Copy를 사용할 때 이를 수행할 때 전체 복사에 대한 요구 사항을 명확히 해야 합니다. 이는 첫 번째 수준 개체 특성이나 배열 요소의 전체 복사본인가요, 아니면 모든 수준의 개체 특성 및 배열 요소에 대한 재귀적 복사본인가요?

Deep copy array

①. 직접 순회

var arr = [1, 2, 3, 4];
function copy(arr){
    var newArr = [];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]);
    }
    return newArr;
}
 
var arrB = copy(arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

실행 결과: arrB 배열 요소의 변경은 arr 배열 요소의 값에 영향을 주지 않습니다.

②. concat(): 두 개 이상의 배열을 연결하는 데 사용됩니다. 이 메서드는 기존 배열을 수정하지 않고 단순히 연결된 배열의 복사본을 반환합니다.

var arr = [0, 1, 2];
var arrB;
 
//把arr赋值给arrB
arrB = arr.concat();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 5;
console.log("arr:", arr);
console.log("arrB:", arrB);

실행 결과: arrB 배열의 요소 변경으로 인해 arr 배열의 요소가 변경되지 않았습니다

3.slice(): 이 메서드는 기존 배열에서 가로채온 요소 조각의 일부를 반환하여 새 배열(원래 배열은 변경되지 않음) .

var arr = [0, 1, 2, 4, 5];
var arrB;
 
//把arr赋值给arrB
arrB = arr.slice();
console.log("arr:", arr);
console.log("arrB:", arrB);
console.log("-----------改变arrB中数组元素的值后-----------");
arrB[0] = 10;
arr[4] = 8;
console.log("arr:", arr);
console.log("arrB:", arrB);

작업 결과: 배열 요소의 변경 사항은 서로 영향을 미치지 않습니다.

위의 세 가지 방법은 배열 요소가 기본 데이터 유형인 단순 배열과 첫 번째 수준 배열 요소가 있는 배열에만 적합합니다. 객체나 배열과 같은 참조 유형 변수 일반적으로 위의 모든 방법은 효과적이지 않습니다.

관련 권장 사항: javascript 학습 튜토리얼

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