JavaScript 배열을 병합하는 N 가지 방법

이것은 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=>의 화살표 함수는 코드 양을 일부 줄여주지만 여전히 각 요소에 대해 한 번씩 호출해야 하는 함수가 필요하므로 완벽하지는 않습니다.

이거 어때요?

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

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

　Array 최대 길이 제한

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

참고: push(...) 및 unshift(. . .) 이 최대 길이 제한을 피할 수 있는 방법이 있습니다.

rree

잠깐, 그게, 어쩌면 바뀔수록 더 나빠질 수도 있습니다. ㅎㅎ

위 내용은 N입니다. JavaScript 배열 병합 방법에 대한 자세한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!