JS 의 두 가지 데이터 형식 및 인용 형식의 깊 은 복사 방법

머리말
JS 에서 데이터 형식 은 접근 방식 과 저장 방식 에 따라 기본 유형 과 인용 유형 으로 나 눌 수 있다 는 것 을 잘 알 고 있 습 니 다.
기본 유형
기본 유형 은 String,Boolean,Number,Undefined,Null 이 있 는데 이런 기본 유형 은 모두 값 에 따라 전달 되 고 값 유형 이 라 고도 부른다.
참조 형식
인용 유형 은 대상,배열,함수 가 있 는데 모두 인용 에 따라 접근 합 니 다.
저장 방식 차이
기본 유형 과 인용 유형 은 메모리 에 저장 하 는 방식 이 다 르 기 때문에 이들 이 접근 하 는 방식 도 다르다.그 중에서 기본 형식 은 메모리 의 스 택 에 저장 되 어 있 으 며 값 에 따라 접근 합 니 다.인용 형식 은 메모리 더미 에 저 장 됩 니 다.인용 에 따라 접근 합 니 다.다음 그림 에서 보 듯 이:
당연히

 var n1 = 10;
 var n2 = 10;
 var arr1 = [1,2,3,4]
 var arr2 = [1,2,3,4]

그림 과 같이 메모리 에 저장 합 니 다:

값 유형 은 창고 에 직접 저 장 된 변수의 실제 값 입 니 다.인용 유형 은 창고 에 변수 가 가리 키 는 더미 의 주소 만 저 장 됩 니 다.위의 그림 에서 보 듯 이 값 유형의 변 수 는 n1 과 n2 가 모두 10 이지 만 창고 에 서 는 이 두 변 수 를 위해 각각 두 개의 공간 을 열 어 저장 합 니 다.인용 유형의 변 수 는 arr1 과 arr2 도 같 습 니 다.그러나 더미 에 하나의 메모리 만 열 어 저장 하고 창고 에 저 장 된 것 은 이 두 변수 가 더미 속 의 주 소 를 가리 키 며 이 두 변 수 는 모두 더미 속 의 같은 주 소 를 가리킨다.
카피
바로 이들 이 저장 방식 이 다 르 기 때문에 복사 할 때의 차 이 를 초래 했다.먼저 두 단락 의 코드 를 봅 니 다.

 var n1 = 10;
 // n1   n2
 var n2 = n1;
 n1 = 12;
 console.log(n1);
 console.log(n2);

먼저 변수 n1=10 을 정의 한 다음 에 n1 을 n2 에 복사 한 다음 에 n1 의 값 을 12 로 바 꾸 고 각각 n1 과 n2 의 값 을 인쇄 합 니 다.인쇄 결 과 는 다음 과 같 습 니 다.

결과 에서 볼 수 있 듯 이 n1 은 12 로 변 했 지만 n2 는 영향 을 받 지 않 고 여전히 10 이다.
다른 코드 보기:

 var arr1 = [1,2,3,4]
 // arr1   arr2
 var arr2 = arr1;
 // arr1         5
 arr1.push(5); 
 console.log(arr1);
 console.log(arr2);

배열 arr 1 을 정의 한 다음 에 arr 1 을 arr 2 에 복사 한 다음 에 arr 1 의 끝 에 요 소 를 추가 하여 각각 arr 1 과 arr 2 의 값 을 인쇄 합 니 다.인쇄 결 과 는 다음 과 같 습 니 다.

결과 에서 우 리 는 먼저 arr 1 을 arr 2 에 복사 하 였 으 나,우리 가 arr 1 을 바 꾸 었 을 때,arr 2 도 함께 바 뀌 었 다 는 것 을 알 수 있다.이것 은 앞에서 말 한 바 와 같이 arr 1 과 arr 2 는 실제 적 으로 메모리 의 같은 주 소 를 가리 키 고 있다.arr 1 이 변화 할 때 실제 적 으로 가리 키 는 이 메모리 주소 의 데 이 터 를 변화 시 켰 고 arr 2 도 이 주 소 를 가리 키 기 때문에 arr 2 도 이에 따라 변화 할 것 이다.
위의 코드 중의 arr2=arr 1 은 바로 우리 가 흔히 말 하 는 얕 은 복사 입 니 다.얕 은 복사 본 은 변수 이름 만 복사 합 니 다.메모리 의 저장 소 는 복사 되 지 않 았 습 니 다.가리 키 는 것 은 같은 메모리 주 소 를 가리 키 는 것 입 니 다.이것 은 바로 변화 가 생 겼 고 다른 것 도 변화 가 생 겼 습 니 다.이것 은 일상생활 에서 우리 가 원 하 는 것 이 아 닙 니 다.
그러면 어떻게 진정한 복사 본 을 실현 합 니까?
4.딥 카피 실현
진정한 복사 란 복사 한 후에 arr 1 과 arr 2 가 가리 키 는 것 은 같은 메모리 주소 가 아니 라 각자 의 주 소 를 가리 키 는 것 이다.이렇게 변화 가 발생 할 때 동시에 변화 하지 않 는 다.이것 이 바로 깊 은 복사 이다.
다음 에 우 리 는 인용 유형의 깊 은 복사 함 수 를 봉인 하여 인용 유형의 깊 은 복 사 를 실현 합 니 다.

 //  p    
 //  c       ，       ，   c [],         c {}，       {}
 function deepCopy(p,c){
 var c = c || {};
 for(var i in p){
 　　if(typeof p[i] === "object"){
 　　　　c[i] = (p[i].constructor === Array)?[]:{};
 　　　　deepCopy(p[i],c[i])
 　　　　}else{
 　　　　c[i] = p[i]
　　 　}
 　　}
 　　return c;
 }

테스트

 //  p    
 //  c       ，       ，   c [],         c {}，       {}
 function deepCopy(p,c){
 var c = c || {};
 for(var i in p){
 　　if(typeof p[i] === "object"){
 　　　　　c[i] = (p[i].constructor === Array)?[]:{};
 　　　　　deepCopy(p[i],c[i])
 　　　　}else{
 　　　　　　c[i] = p[i]
 　　　　}
 　　}
 　　return c;
 }
 //    arr1
 var arr1 = [1,2,3,4]
 // arr1   arr2
 var arr2 = deepCopy(arr1,[]);
 // arr1         5
 arr1.push(5);
 console.log('arr1:',arr1);
 console.log('arr2:',arr2);

테스트 결과:

그 결과 arr 1 의 변 화 는 arr 2 의 변 화 를 일 으 키 지 않 고 진정한 복 사 를 실현 한 것 으로 나 타 났 다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 JS 의 두 가지 데이터 유형 과 인용 유형 을 깊이 복사 하 는 방법 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다!