JavaScript_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"
]

연결(..)

가장 일반적인 접근 방식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var c = a.concat( b );
// [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'는 재활용됩니다

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

루프 삽입

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

코드 복사 코드는 다음과 같습니다.

// `b`를 `a` 위에
for (var i=0; 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`를 `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`를 `a` 위에:
a = b.reduce( function(coll,item){
coll.push(항목);
콜 반환;
}, a );

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

// 또는 `a`를 `b`로:
b = a.reduceRight( function(coll,item){
coll.unshift(항목);
콜 반환;
}, b );

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

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

이것은 어떻습니까:

코드 복사 코드는 다음과 같습니다.

// `b`를 `a` 위에:
a.push.apply( a, b );

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

// 또는 `a`를 `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(...)에 허용되는 호출 스택 제한을 확실히 초과하게 됩니다. 아쉽게도 수천 개의 요소로 훌륭한 작업을 수행할 수 있지만 합리적인 길이 제한을 초과하지 않도록 주의해야 합니다.

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

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

코드 복사 코드는 다음과 같습니다.

함수 CombineInto(a,b) {
var len = a.길이;
for (var i=0; i b.unshift.apply( b, a.slice( i, i 5000 ) );
}
}

잠깐만요. 가독성이 뒤떨어져 있어요. 그렇죠, 바뀌면 더 심해질 수도 있겠네요, 하하.