>  기사  >  웹 프론트엔드  >  JavaScript 배열 및 개체 복사에 대한 코드 예제 분석

JavaScript 배열 및 개체 복사에 대한 코드 예제 분석

黄舟
黄舟원래의
2017-03-21 14:26:171000검색

이 글에서는 JavaScript 배열객체 복사 관련 지식을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터로 살펴보겠습니다

1. 데이터 유형

협의적으로는 JS 모든 데이터는 크게 기본 유형과 참조 유형 두 가지로 구분됩니다. 기본 유형에는 Undefine, Null, Boolean, Number, String이 있으며, 일반적으로 참조 유형이 있습니다. 사용되는 Array, Date, RegExp, Function 등은 모두 Object class 유형에 속합니다.

기본 데이터와 참조 데이터의 차이점 중 하나는 변수를 복사할 때 기본 데이터는 독립적인 새 복사본을 복사하는 반면, 참조 데이터는 원본 변수에 대한 참조를 복사한다는 것입니다. 예는 다음과 같습니다.

// 基本类型数据的复制
var a = 10;
var b = a; // b = 10
a = 20; // a = 20, b = 10
// 引用类型数据的复制
var m = [1, 2];
var n = m;
m[0] = 10;
console.log(n[0]); // 10

참조 대신 참조 유형 자체의 값을 복사하려면 위의 방법을 사용할 수 없습니다.

2. 배열의 얕은 복사

얕은 복사는 객체(배열)를 복사할 때 해당 참조 필드의 값이 복사되지 않고 복사된다는 의미입니다. 해당 필드에 대한 참조입니다. 예:

var src = [
 'alpha',
 ['bravo', 'chalie']
];
var dest = [];
for (var i = 0; i < src.length; i++) {
 dest[i] = src[i];
}
//此时,如果改变src中的引用字段,dest中相应的字段也会被改变
src[1].push(&#39;delta&#39;);
console.log(dest[1]); // [&#39;bravo&#39;, &#39;chalie&#39;, &#39;delta&#39;]

얕은 복사는 일반적으로 1차원 배열, 즉 배열에 참조 유형이 없는 경우에 사용됩니다. 일반적으로 사용되는 얕은 복사 방법은 다음과 같습니다.

concat 방법

 var src = [&#39;alpha&#39;, &#39;bravo&#39;],
  dest = [];
 dest = dest.concat(src);

concat 방법은 다음과 같이 배열 병합에 더 일반적으로 사용됩니다.

 var a = [&#39;alpha&#39;, &#39;bravo&#39;],
  b = [&#39;chalie&#39;, &#39;delta&#39;],
  combine;
 combine = a.concat(b);

특히 concat을 사용하여 배열을 병합할 때 두 개(또는 그 이상) 배열의 모든 요소를 ​​새 객체에 복사한다는 점에 유의해야 합니다. 대규모 배열의 경우 오버헤드가 상대적으로 높습니다. 더 좋은 방법은 후자 배열의 요소를 이전 배열에 복사하는 것입니다.

 var src = [&#39;alpha&#39;, &#39;bravo&#39;],
  dest = [&#39;chalie&#39;, &#39;delta&#39;];
 Array.prototype.push.apply(src, dest);

슬라이스 방법

슬라이스 방법은 다음에서 사용할 수 있습니다. 배열에서 선택한 요소를 반환하고 새 배열을 반환합니다.

 var src = [&#39;alpha&#39;, &#39;bravo&#39;],
 var dest = src.slice(0);

jQuery의 $.extend, 밑줄의 _.extend 등을 사용하여 객체를 복사할 수도 있습니다.

4. 전체 복사

얕은 복사에는 제한된 적용 시나리오가 더 많으며

개체를 완전한 하나의 복사본으로 복사하려고 합니다. 각 필드의 유형을 결정하기 위해 typeof 또는 instanof 연산자를 사용합니다. 필드가 기본 유형인 경우 직접 복사할 수 있습니다. 필드가 참조 유형인 경우 위의 판단은 해당 필드의 모든 필드에 대해 이루어져야 하므로

재귀를 사용하여 이 기능을 구현하는 것을 쉽게 고려할 수 있습니다.

 var src = {name: &#39;fox&#39;, age: 20},
  dest = null;
 dest = Object.assign({}, src);

위 코드에서 배열은 특수 객체이므로 for-in을 사용하여 탐색할 수 있습니다.

또한 json 방법을 사용할 수도 있습니다.

function deep_copy(src, dest) {
 for (var p in src) {
  if (Array.isArray(src[p]) || src[p] instanceof Object) {
   dest[p] = Array.isArray(src[p]) ? [] : {};
   arguments.callee(dest[p], src[p]);
  }else {
   dest[p] = src[p];
  }
 }
}

이 방법이 더 쉽지만 원본 개체의 많은

속성

이 손실됩니다. 생성자 속성 및 객체 프로토타입의 일부 메소드와 같은 작업 후.

위 내용은 JavaScript 배열 및 개체 복사에 대한 코드 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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