JavaScript 배열 병합의 여러 방법에 대한 자세한 설명

이 글은 주로 JavaScript 배열을 병합하는 다양한 방법을 자세히 소개합니다. 관심 있는 친구들은 참고하세요.

이 글은 JavaScript 배열 사용에 대한 몇 가지 팁에 대한 간단한 글입니다. 두 개의 JS 배열을 결합/병합하기 위해 다양한 방법을 사용하고 각 방법의 장점/단점에 대해 논의합니다.

먼저 다음 상황을 고려해 보겠습니다.

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

분명히 가장 간단한 조합 결과는 다음과 같습니다.

[
  1, 2, 3, 4, 5, 6, 7, 8, 9,
  "foo", "bar", "baz", "bam" "bun", "fun"
]

concat(..)

이것이 가장 일반적인 접근 방식입니다.

var c = a.concat( b );
a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]
c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

보시다시피 C는 다음과 같습니다. 두 배열 a와 b의 조합을 나타내고 A와 B는 변경되지 않은 상태로 유지되는 새로운 배열입니다. 간단하죠?

하지만 a에 10,000개의 요소가 있고 b에도 10,000개의 요소가 있으면 어떻게 될까요? C에는 20,000개의 요소가 있으므로 a와 b의 메모리 사용량은 두 배가 됩니다.

“문제없어요!”라고 말씀하셨어요. 가비지 수집을 수행하고 A와 B를 null로 설정하면 문제가 해결됩니다!

a = b = null; // 'a'와 'b'는 재활용됩니다
하하. 요소 수가 적은 작은 배열의 경우 이는 문제가 되지 않습니다. 그러나 대규모 어레이나 이 프로세스를 자주 반복해야 하는 메모리가 제한된 시스템의 경우 실제로 개선의 여지가 많습니다.

LoopInsert

다음을 사용하여 한 배열의 내용을 다른 배열로 복사해 보겠습니다. Array#push(..)

// `b` onto `a`
for (var i=0; i < b.length; i++) {
  a.push( b[i] );
}
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
b = null;

이제 배열 a는 배열 b의 콘텐츠를 갖습니다.

메모리 공간이 더 나은 것 같습니다.

하지만 배열 a가 상대적으로 작다면 어떨까요? 메모리 및 속도상의 이유로 b 앞에 작은 a를 배치하는 것이 좋습니다. 문제 없습니다. push(..)를 unshift(..)로 바꾸면 됩니다.

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
  b.unshift( a[i] );
}
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

기능적 요령

하지만 for 루프는 정말 보기 흉하고 유지 관리가 어렵습니다. 우리가 더 잘할 수 있을까요?

이것은 Array#reduce를 사용한 첫 번째 시도입니다.

// `b` onto `a`:
a = b.reduce( function(coll,item){
  coll.push( item );
  return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b = a.reduceRight( function(coll,item){
  coll.unshift( item );
  return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) 및 Array#reduceRight(..)은 훌륭하지만 약간 어색합니다. ES6 => 화살표 함수 를 사용하면 코드 양이 일부 줄어들지만 여전히 각 요소에 대해 한 번씩 호출해야 하는 함수가 필요하므로 완벽하지는 않습니다.

이건 어때요:

// `b` onto `a`:
a.push.apply( a, b );
a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
// or `a` into `b`:
b.unshift.apply( b, a );
b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

이게 훨씬 낫죠? 특히 unshift(..) 메소드는 여기서 이전의 역정렬에 대해 걱정할 필요가 없기 때문에 더욱 그렇습니다. ES6의 범위 연산은 더 아름다울 것입니다: a.push( ...b ) 또는 b.unshift( ...a

최대 배열 길이 제한

첫 번째 주요 문제는 메모리 사용량이 두 배로 늘어났다는 것입니다(물론 단지 일시적으로 추가되는 내용은 기본적으로 함수 호출을 통해 요소를 스택에 복사하는 것입니다. 또한 다른 JS 엔진에는 복사된 데이터의 길이에 제한이 있으므로 배열에 요소가 백만 개 있으면 확실히 한도를 초과하게 됩니다. push(...) 또는 unshift(...)에 허용되는 호출 스택의 수입니다. 아쉽게도 수천 개의 요소를 사용하면 문제가 없지만 합리적인 길이 제한을 초과하지 않도록 주의해야 합니다.

참고: splice를 시도해 볼 수 있습니다. (...), push(...) 및 unshift(...)와 동일한 문제가 있습니다.

이 최대 길이 제한을 피할 수 있는 방법이 있습니다.

function combineInto(a,b) {
  var len = a.length;
  for (var i=0; i < len; i=i+5000) {
    b.unshift.apply( b, a.slice( i, i+5000 ) );
  }
}

잠깐, 가독성이 거꾸로 가고 있습니다. 변화할수록 더 악화될 수 있습니다.

위 내용은 JavaScript 배열 병합의 여러 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!