>  기사  >  웹 프론트엔드  >  JS 배열과 객체의 얕은 복사와 깊은 복사에 대한 튜토리얼

JS 배열과 객체의 얕은 복사와 깊은 복사에 대한 튜토리얼

巴扎黑
巴扎黑원래의
2017-06-26 15:03:281299검색

서로 격려해주세요~

많은 프로그래밍 언어에서 매개변수 전달과 값 할당은 값을 직접 복사하거나 참조에 의한 복사를 통해 완료됩니다. JavaScript에서는 값을 직접 복사하든 참조로 복사하든 구문 차이가 없습니다. 이는 전적으로 값 유형에 따라 결정됩니다.

JavaScript에서 단순 값은 항상 값(null, 정의되지 않음, 문자열, 숫자, 부울, 기호)의 직접 복사로 전달되는 반면, 복합 값(객체(배열 등 포함) 및 함수)은 전달됩니다. 항상 참조에 의한 복사로 할당 및 전송이 이루어집니다.

다음 예제를 보면 이해가 깊어질 수 있습니다.

var a = 1;var b = a;
b++;
a; //1b; //2var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

배열의 얕은 복사본

위 예제에서 배열의 할당 작업은 배열의 얕은 복사본을 찾는 것이 어렵지 않습니다. 문제. 하나의 어레이가 변경되면 할당된 다른 어레이도 변경되는데, 이는 많은 백업과 같은 상황에서 우리가 원하는 바가 아닙니다.

var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

배열의 전체 복사본

두 가지 방법으로 배열의 전체 복사본을 구현할 수 있습니다.

var a = [1,2,3];var b = a.slice(0);var c = a.concat();

b.push(4);

c.push(5);

a; //[1,2,3]b; //[1,2,3,4]c; //[1,2,3,5]

객체의 얕은 복사본

상대적으로 배열의 복사본은 상대적으로 간단하지만, 개체의 얕은 복사본은 상대적으로 간단합니다. 간단하게 구현할 수도 있습니다:

function easyClone(Obj) {var objNew = {};for ( var i in Obj) {
        objNew[i] = Obj[i];
    }return objNew;
}

사실 각 원본 개체의 속성과 값을 새 개체에 복사하는 것입니다. 물론 Object.sign()을 사용할 수도 있습니다. 원하는 수의 소스 객체를 자신의 열거 가능한 객체에 할당하는 방법입니다. 속성을 대상 객체에 복사한 다음 대상 객체를 반환하는 동시에 Object.ass()도 관심 있는 학생에게 살펴볼 수 있습니다. .

Shallow Copy는 객체의 각 값이 객체인지 확인하는 재귀적 루프가 없고 직접 값을 할당하므로 특정 값이 객체이면 문제가 발생하므로 일반적으로 Deep Copy를 사용해야 합니다. .백업을 하세요.

객체의 전체 복사본

가장 간단한 전체 복사본:

b = JSON.parse( JSON.stringify(a) )

제한 사항:

  • 함수를 복사할 수 없습니다.

  • 프로토타입 체인이 사라졌고, 객체는 객체이며, 해당 클래스가 속한 클래스는 다음과 같습니다. 다 쓴.

사실 간단한 전체 복사에서는 얕은 복사만 재귀적으로 호출하면 됩니다.

function deepCopy(obj) {
  var objNew = objNew || {};
  for (var i in obj) {
    if (typeof p[i] === 'object') {
      objNew[i] = (p[i].constructor === Array) ? [] : {};
      deepCopy(obj[i], objNew[i]);
    } else {
       objNew[i] = obj[i];
    }
  }
  return objNew;
}

물론 JQ의 jQuery.extend() 메서드도 깊은 복사와 얕은 복사를 수행할 수 있습니다. 자세한 내용은 이 문서를 참조하세요:

얕은 복사 및 전체 복사 - jQuery

의 $.extend 분석

위 내용은 JS 배열과 객체의 얕은 복사와 깊은 복사에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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