JS에서 배열을 병합하는 여러 가지 방법과 장단점 비교_기본지식

이 글은 JavaScript의 기본 기술에 속하며, 두 개의 JS 배열을 결합/병합하는 다양한 일반적인 방법을 배우고 다양한 방법의 장단점을 비교해 보겠습니다.

먼저 구체적인 시나리오를 살펴보겠습니다.

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

var q = [5, 5, 1, 9, 9, 6, 4, 5, 8];
var b = [ "tie", "mao", "csdn", "ren", "fu", "fei" ];

분명히 배열 q와 b를 단순 연결한 결과는 다음과 같습니다.

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

[
5, 5, 1, 9, 9, 6, 4, 5, 8,
"tie", "mao", "csdn", "ren", "fu", "fei"
]

concat(..) 방법

가장 일반적인 사용법은 다음과 같습니다.

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

var c = q.concat( b );

q // [5,5,1,9,9,6,4,5,8]
b; // ["tie","mao","csdn","ren","fu","fei"];

c; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

보시다시피 c는 두 배열 q와 b의 조합을 나타내는 완전히 새로운 배열인데, q와 b는 이제 쓸모가 없잖아요?

q 배열에 10,000개의 요소가 있고 b 배열에도 10,000개의 요소가 있다면 이제 c 배열에는 20,000개의 요소가 있고 이 방법은 메모리를 두 배로 차지합니다.

"괜찮아!"라고 생각할 수도 있습니다. q와 b를 비워두면 가비지 수집이 됩니다.

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

q = b = null; // `q`와 `b`는 이제 가비지 수집됩니다

루프 삽입

좋아요. Array#push() 메서드를 사용하여 한 배열의 내용을 다른 배열에 추가해 보겠습니다.

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

// `q`에 배열 `b`를 삽입합니다

for (var i=0; i q.push( b[i] );
}

q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

b = null;

이제 q는 두 개의 원래 배열(q b)의 내용을 저장합니다.

메모리 최적화가 잘 된 것 같습니다.

그러나 q 배열이 작고 b가 크다면 어떻게 될까요? 메모리와 속도를 위해 b 앞에 더 작은 q를 삽입하고 싶습니다. 문제 없습니다. push( 대신 unshift() 메서드를 사용하면 됩니다. ) 그게 전부입니다. 해당 주기는 큰 것에서 작은 것으로 이동해야 합니다.

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

// `q`를 `b`로:

for (var i=q.length-1; i >= 0; i--) {
b.unshift( q[i] );
}

b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

q = null;

실용팁

안타깝게도 for 루프는 지루하고 유지 관리가 어렵습니다.

먼저 Array#reduce를 시도해 보겠습니다.

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

// `b`를 `q`로:

q = b.reduce( function(coll,item){
coll.push(항목);
콜 반환;
}, q );

q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

// 또는 `q`를 `b`로:

b = q.reduceRight( function(coll,item){

coll.unshift(항목);
콜 반환;
}, b );

b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

Array#reduce() 및 Array#reduceRight()는 매우 화려하지만 약간 번거롭고 대부분의 사람들이 기억하지 못합니다. JS 사양 6의 => 화살표 기능은 코드 양을 크게 줄일 수 있습니다. , 그러나 각 배열 요소에 대해 함수 호출이 필요하며 이 역시 매우 열악한 방법입니다.
그렇다면 아래 코드는 어떨까요?

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

// `b`를 `q`로:
q.push.apply( q, b );

q; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

// 또는 `q`를 `b`로:
b.unshift.apply( b, q );

b; // [5,5,1,9,9,6,4,5,8,"tie","mao","csdn","ren","fu","fei"]

BIG가 더 높죠!? 특히 unshift() 메소드는 이전과 같이 역순을 고려할 필요가 없습니다. ..b ) 또는 b.unshift( ...a )

그러나 사실 이 메서드는 두 경우 모두 여전히 너무 낙관적입니다. a 또는 b가 두 번째 매개변수로 apply()에 전달되는지 여부(첫 번째 매개변수는 적용 모드에서 Function을 호출할 때 내부입니다) 컨텍스트, 범위) 또는 확장 연산자를 사용합니다. 실제로 배열은 함수의 인수로 분할됩니다.
첫 번째 주요 문제는 배열을 함수 스택에 복사해야 하기 때문에 메모리를 두 배(물론 일시적으로!) 차지한다는 것입니다. 또한 JS 엔진마다 구현 알고리즘이 다르기 때문에 매개변수 수가 제한될 수 있습니다. 함수에 전달할 수 있습니다.

1백만 개의 요소가 배열에 추가되면 push() 또는 unshift() 호출에 관계없이 함수 스택에서 허용하는 크기를 확실히 초과하게 됩니다. 이 메서드는 수천 개의 요소가 있는 경우에만 사용할 수 있습니다. 제한되어야 합니다. 일정 범위를 초과할 수 없습니다.

참고: splice()를 시도해 볼 수도 있으며 push(..)/unshift(..)와 동일한 제한 사항이 있음을 확실히 알 수 있습니다.

한 가지 옵션은 이 방법을 계속 사용하는 것이지만 일괄적으로 사용하는 것입니다.

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

함수 CombineInto(q,b) {
var len = q.length;
for (var i=0; i               // 한 번에 5000개 항목 처리
b.unshift.apply( b, q.slice( i, i 5000 ) );
}
}

잠깐만요, 코드의 가독성(심지어 성능까지)이 저하되고 있습니다. 포기하기 전에 이 여정을 끝내겠습니다.

요약

Array#concat()은 두 개 이상의 배열을 결합하기 위해 시도되고 테스트된 방법입니다. 그러나 기존 배열을 수정하는 대신 새 배열을 생성합니다.

대체 방법은 많지만 모두 장점과 단점이 다르므로 실제 상황에 따라 선택해야 합니다.

위에 나열된 다양한 장점/단점이 있습니다. 아마도 가장 좋은 것(목록에 없는 것 포함)은 Reduce(..) 및 ReduceRight(..)입니다.

무엇을 선택하든 어레이 병합 전략에 대해 비판적으로 생각하고 이를 당연한 것으로 여기지 마십시오.