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으로 설정하면 문제가 해결됩니다!

아아아

하하. 몇 개의 요소만 있는 작은 배열의 경우에는 문제가 되지 않습니다. 그러나 대규모 어레이나 이 프로세스를 자주 반복해야 하는 메모리가 제한된 시스템의 경우 실제로 개선의 여지가 많습니다.

루프 삽입

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

a = b = null; // 'a'和'b'就被回收了

이제 배열 a에는 다음의 내용이 있습니다. 배열 ㄴ.

메모리 사용량이 더 좋은 것 같습니다.

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

// `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;

기능적 트릭

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

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

// `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"]

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

이건 어때요:

으으으으

이게 훨씬 낫죠? 특히 unshift(..) 메소드는 여기서 이전의 역정렬에 대해 걱정할 필요가 없기 때문에 더욱 그렇습니다. ES6의 스프레드 작업은 더 아름답습니다: a.push(…b) 또는 b.unshift(…a

최대 배열 길이 제한

첫 번째 주요 문제는 메모리입니다. (물론 일시적입니다!) 추가된 콘텐츠는 기본적으로 함수 호출을 통해 요소를 스택에 복사합니다. 또한, 다른 JS 엔진에는 복사된 데이터의 길이에 제한이 있습니다. 백만 개의 요소를 사용하면 push(...) 또는 unshift(...)에서 허용하는 호출 스택 제한을 확실히 초과하게 됩니다. 아쉽게도 수천 개의 요소로는 잘 작동하지만 합리적인 길이 제한을 초과하지 않도록 주의해야 합니다.

참고: push(…) 및 unshift(…)와 동일한 문제가 있는 splice(…)를 사용해 볼 수 있습니다. 🎜>이 최대 길이 제한을 피할 수 있는 방법이 있습니다.

// `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"]

그렇습니다. 변경하면 가독성이 나빠질 수 있습니다.

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