배열 및 객체의 깊은 복사본과 얕은 복사본을 구현하는 방법

전제: 값을 할당할 때 원시 데이터 유형과 객체 유형의 차이점

　 자바스크립트 데이터 유형은 원시 데이터 유형과 객체 유형으로 구분됩니다. 둘은 메모리에 서로 다른 방식으로 저장되므로 할당에 차이가 있습니다. 밤을 각각 가져가자

  var x = 1;  var y = x;  //y获得了和x同样的值
  y = 2;
  console.log(x);  // 1

  var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
  var n = m; //n也获得 [1,2]数组对象的引用地址
  n[0] = 3;
  console.log(m);  //[3,2]

위의 밤을 보면 알 수 있다. 원래 데이터 유형을 할당하면 실제 데이터 값이 주어지고 할당 후에는 두 값이 동일하며 영향을 미치지 않는다. 객체 유형은 원본 데이터의 참조 주소이므로 Shangli의 배열과 같이 본질적으로 동일한 데이터 객체이기 때문에 이전 데이터와 새 데이터가 서로 영향을 미칩니다

얕은 복사본인가요?

　이름에서 알 수 있듯이 얕은 복사는 속성 값이 객체 유형인 경우 객체 데이터에 대한 참조만 복사되므로 이전 데이터와 새 데이터가 완전히 분리되지 않고 영향을 미칩니다. 서로. 다른 예를 들어보겠습니다...

  //测试数据
  var array1 = ['a',1,true,{name:'lei',age:18}];

  //concat()  slice() 实现浅拷贝
  var array2 = array1.concat()

  //修改拷贝后的数据
  array2[0] = 'b';            //array1[0]是原始数据类型 所以是直接赋值的
  array2[3].name = 'zhang';   //array1[3]是对象数据类型 所以拷贝的是对象的引用，其实还是和原数组使用同一对象

  console.log(array1);   //  ['a',1,true,{name:'zhang',age:18}]

이 예에서 array2는 array1의 얕은 복사본 개체입니다. 배열 요소는 원래 데이터 유형이고 서로 영향을 주지 않지만(array1[0]) array1[ 3]은 객체 유형이며 여전히 서로 영향을 미칩니다.

얕은 복사본을 구현하는 방법

1. Shangli의array.concat() 또는 array.slice()는 배열의 얕은 복사본을 구현하는 특별한 방법입니다.

2. 직접 구현하는 방법은 무엇인가요? 객체/배열의 각 속성을 순회한 후 이를 새 객체에 할당하면 충분하지 않을까요? 구현은 다음과 같습니다

  //实现浅拷贝
  function shallowCopy( target ){
    if(typeof target !== 'object') return ;
    //判断目标类型，来创建返回值
    var newObj = target instanceof Array ? [] : {};

    for(var item in target){
      //只复制元素自身的属性，不复制原型链上的
      if(target.hasOwnProperty(item)){
        newObj[item] = target[item]
      }
    }

    return newObj
  }

  //测试

  var test = [1,'a',{name:'lei',age:18}];

  var copy = shallowCopy(test);
  console.log(copy[2].name);   //lei

  copy[2].name = 'zhang';
  console.log(test[2].name);   //zhang   原数据也被修改

Deep copy 및 그 구현

　Shallow Copy에 대한 설명에서 다음과 같이 할 수 있습니다. 기본적으로 딥 카피는 '완전한' 복사본이라는 것을 이해합니다. 복사한 후에는 이전 데이터와 새 데이터가 완전히 분리되고 더 이상 객체 유형의 속성 값을 공유하지 않으며 서로 영향을 미치지 않습니다.

　 구현 방법:

1. 까다로운 방법 JSON.parse(JSON.stringify(Obj))
   

var test = [1,'a',{name:'lei',age:18}];

var copy1 = JSON.parse(JSON.stringify(test));  //特殊方式

console.log(copy1);

copy1[2].name = 'zhang'
console.log(test);   //[1,'a',{name:'lei',age:18}]  未受到影响

　 참고: 이 방법은 속성 값이 함수인 개체를 깊은 복사할 수 없습니다. 직접 시도해 볼 수 있습니다.

　 2. deep copy 구현

　 우리는 이미 얕은 복사를 구현해 놓았는데, 생각해보면 객체 유형 속성 값을 할당할 때 결과가 완전히 분리되지는 않기 때문에 객체를 복사하는 방식을 수정해야 합니다. 속성 값을 입력하고 다시 Deep Copy를 호출하면 다음과 같이 Deep Copy가 구현됩니다.

//实现深拷贝
function deepCopy( target ){
  if(typeof target !== 'object') return ;
  //判断目标类型，来创建返回值
  var newObj = target instanceof Array ? [] : {};

  for(var item in target){
    //只复制元素自身的属性，不复制原型链上的
    if(target.hasOwnProperty(item)){
      newObj[item] = typeof target[item] == 'object' ? deepCopy(target[item]) : target[item]  //判断属性值类型    }
  }

  return newObj
}

//测试
var test = [1,'a',{name:'lei',age:18}];

var copy2 = deepCopy(test);
copy2[2].name = 'zhang'

console.log(test);  ////[1,'a',{name:'lei',age:18}]  未受到影响

Summary

Shallow Copy의 이유를 꼭 이해하세요. 객체 유형 데이터를 복사할 때 참조 주소가 복사됩니다. 동일한 데이터 객체를 사용하므로 Deep Copy를 구현합니다. 직접 할당을 피하기 위해 객체 유형 속성 값을 재귀적으로 Deep Copy하는 방법입니다.

위 내용은 배열 및 객체의 깊은 복사본과 얕은 복사본을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!