이 글은 JavaScript의 기본 기술에 속하며, 두 개의 JS 배열을 결합/병합하는 다양한 일반적인 방법을 배우고 다양한 방법의 장단점을 비교해 보겠습니다.
먼저 구체적인 시나리오를 살펴보겠습니다.
분명히 배열 q와 b를 단순 연결한 결과는 다음과 같습니다.
concat(..) 방법
가장 일반적인 사용법은 다음과 같습니다.
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를 비워두면 가비지 수집이 됩니다.
좋아요. Array#push() 메서드를 사용하여 한 배열의 내용을 다른 배열에 추가해 보겠습니다.
b = null;
메모리 최적화가 잘 된 것 같습니다.
그러나 q 배열이 작고 b가 크다면 어떻게 될까요? 메모리와 속도를 위해 b 앞에 더 작은 q를 삽입하고 싶습니다. 문제 없습니다. push( 대신 unshift() 메서드를 사용하면 됩니다. ) 그게 전부입니다. 해당 주기는 큰 것에서 작은 것으로 이동해야 합니다.
q = null;
안타깝게도 for 루프는 지루하고 유지 관리가 어렵습니다.
먼저 Array#reduce를 시도해 보겠습니다.
// 또는 `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의 => 화살표 기능은 코드 양을 크게 줄일 수 있습니다. , 그러나 각 배열 요소에 대해 함수 호출이 필요하며 이 역시 매우 열악한 방법입니다.
그렇다면 아래 코드는 어떨까요?
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(..)와 동일한 제한 사항이 있음을 확실히 알 수 있습니다.
한 가지 옵션은 이 방법을 계속 사용하는 것이지만 일괄적으로 사용하는 것입니다.
잠깐만요, 코드의 가독성(심지어 성능까지)이 저하되고 있습니다. 포기하기 전에 이 여정을 끝내겠습니다.
요약
Array#concat()은 두 개 이상의 배열을 결합하기 위해 시도되고 테스트된 방법입니다. 그러나 기존 배열을 수정하는 대신 새 배열을 생성합니다.
대체 방법은 많지만 모두 장점과 단점이 다르므로 실제 상황에 따라 선택해야 합니다.
위에 나열된 다양한 장점/단점이 있습니다. 아마도 가장 좋은 것(목록에 없는 것 포함)은 Reduce(..) 및 ReduceRight(..)입니다.
무엇을 선택하든 어레이 병합 전략에 대해 비판적으로 생각하고 이를 당연한 것으로 여기지 마십시오.