JavaScript 개체의 깊은 복사본과 얕은 복사본 예에 대한 자세한 설명

계층적 관점에서 객체 복사는 간단히 말해서 얕은 복사(shallow copy)와 깊은 복사(deep copy)로 나눌 수 있습니다. 이름에서 알 수 있듯이 얕은 복사는 객체의 한 레이어 속성만 복사하는 것을 의미하며, 다른 레이어에 있는 객체의 속성은 복사하지 않습니다. 개체 전체 복사 개체 내에 중첩된 개체의 속성이 복사됩니다. 이 글은 얕은 카피부터 깊은 카피까지 제가 객체를 카피하면서 겪은 일들을 요약한 것입니다. 관심 있는 친구들은 함께 배울 수 있습니다

서문

계층적 관점에서 개체 복사는 간단히 말해서 얕은 복사와 깊은 복사로 나눌 수 있습니다. 이름에서 알 수 있듯이 얕은 복사는 개체 레이어의 속성만 복사하는 것을 의미하며 개체의 속성은 복사하지 않습니다. 개체의 전체 복사는 개체의 속성을 복사합니다.

객체를 복사할 때 객체의 속성을 복사하는 것 외에도 객체의 생성자 속성이 유지되는지, 각 데이터 유형(Javascript의 일반적인 데이터 유형에는 문자열이 포함되는지 여부)도 고려해야 합니다. , Number, Boolean, Data, RegExp, Array, Function, Object) 모두 올바른 복사를 달성합니다. 프로젝트에서는 실제 상황에 따라 어느 정도의 복제를 달성해야 하는지 결정할 수 있습니다.

이 글은 얕은 복사부터 깊은 복사까지, 단순한 속성만 복사하는 것부터 Function, RegExp와 같은 복잡한 속성을 복사하는 것까지, 레이어별로 진행되는 객체 복사 경험을 요약한 것입니다. 만약 내용에 부적절한 내용이 있다면 지적해 주시면 정말 감사하겠습니다.

텍스트

얕은 복사

얕은 복사는 개체의 각 속성만 복사합니다. 시퀀스를 사용하면 이러한 속성은 재귀적으로 복사되지 않습니다. 다음은 간단한 얕은 복사 구현입니다.

rree

잘 살펴보면 위 방법의 단점을 찾는 것이 어렵지 않습니다.

1. 배열의 얕은 복사본을 올바르게 구현할 수 없습니다.

2. 작업이 객체의 생성자 속성을 잃습니다

자, 이제 문제를 발견했습니다. 목표한 방식으로 문제를 해결하기만 하면 객체를 얕은 복사하는 상당히 완벽한 방법이 탄생했습니다!

//对象浅复制        
function shadowCopy(obj){
 if(typeof obj !== 'object') return obj;
 for(var prop in obj){
  if(obj.hasOwnProperty(prop)){
  newObj[prop] = obj[prop];
  }
 }
 return newObj;
 }

브라우저에서 테스트하세요:

//对象浅复制
 function shadowCopy(obj){
  if(typeof obj !== 'object') return ;
  var newObj;
  //保留对象的constructor属性
  if(obj.constructor === Array){
  newObj = [];
  } else {
  newObj = {};
  newObj.constructor = obj.constructor;
  }
  for(var prop in obj){
  if(obj.hasOwnProperty(prop)){
   newObj[prop] = obj[prop];
  }
  }
  return newObj;
 }

좋습니다! 배열 복사를 올바르게 구현하고 생성자를 유지할 수 있습니다. . 그러나 조심한다면 얕게 복사된 객체의 arr2Copy[3]과 arr2[3]이 동일한 객체를 가리킨다는 것을 발견했을 것입니다. 우리가 달성하고 싶은 것은 복제이지만 이것은 복제가 아닙니다!
이것은 얕은 복사의 단점 중 하나입니다. 깊은 복사가 이 문제를 어떻게 해결하는지 살펴보겠습니다.

딥 카피

딥 카피에는 객체의 속성을 포함하여 객체의 모든 속성을 복사하는 재귀 계층이 필요합니다....(Halo ~)
생성자나 함수, 일반 및 데이터와 같은 특수 데이터 유형을 고려하지 않고 객체의 속성만 복사해야 하는 경우 다음 코드 두 줄로 깊은 복사를 위한 작은 트릭을 소개합니다.

var arr1 = [0,1,2];
 console.log(arr1);
 console.log(shadowCopy(arr1));
 var arr2 = [0,1,2,[3,4,5]],
 arr2Copy = shadowCopy(arr2);
 console.log(arr2);
 console.log(arr2Copy);
 arr2Copy[3][0] = 6;
 console.log(arr2[3][0]); //6

대부분의 경우 위의 요구 사항을 충족할 수 있지만 때로는 함수, 정규 표현식과 같은 특수한 데이터 유형이나 현재 환경을 고려해야 합니다. 지원하지 않습니다. JSON을 사용하는 경우 위 방법이 적용되지 않습니다. 이때 다음과 같이 재귀를 통해 객체의 깊은 복사를 달성할 수 있습니다.

function deepCopy(obj){
 if(typeof obj !== "object"){ return ;}
 var str = JSON.stringify(obj);
 return JSON.parse(str);
}

먼저 위의 예를 사용하여 테스트합니다.

좋아요! 다차원 배열의 복사가 올바르게 구현되고, 함수 및 정규식의 복사가 구현되는지 확인하세요:

function deepCopy(obj){
 if(typeof obj !== "object"){ return ;}
 var newObj;
 //保留对象的constructor属性
 if(obj.constructor === Array){
 newObj = [];
 } else {
 newObj = {};
 newObj.constructor = obj.constructor;
 }
 for(var prop in obj){
 if(typeof obj[prop] === 'object'){
  if(obj[prop].constructor === RegExp ||obj[prop].constructor === Date){
  newObj[prop] = obj[prop];
  } else {
  //递归
  newObj[prop] = deepCopy(obj[prop]);
  }
 } else {
  newObj[prop] = obj[prop];
 }
 }
 return newObj;
}

성공적으로 완료되었습니다! !

조금 정리하면 좀 더 일반적인 js 객체 복사 기능을 얻을 수 있습니다.

function Person(name){
 this.name = name;
 this.age = age;
 this.search = new RegExp(name);
 this.say = function(){
 console.log(this.name + "今年" + this.age + "岁了");
 }
}
var p1 = new Person("Claiyre",20),
 p2 = deepCopy(p1);
console.log(p1);
console.log(p2);
p2.age = 22;
p1.say();
p2.say();

결론

객체지향 프로그래밍 언어의 핵심은 객체이므로, 객체와 관련된 동작에 대한 심층적인 이해와 유사점과 차이점의 수직적 비교는 학습 과정에 매우 유익합니다.

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