JS 합병 배열 의 여러 가지 방법 과 우열 을 비교 하 다.

원본 링크:  Combining JS Arrays
날짜: 2014 - 09 - 09
번역 일자: 2014 - 09 - 18
닻
본 고 는 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 (..) 방법
가장 흔히 볼 수 있 는 용법 은 다음 과 같다.
보다 시 피
c 는 새로운 배열 입 니 다.
q 와
b. 이 두 배열 의 조합, 하지만
q 와
b 이제 소 용 없 죠?
하면, 만약, 만약...
q 배열
10000 개의 원소,
b 배열 도 있어 요.
10000 개의 원소?그러면 배열
c. 현재 20000 개의 요소 가 있 는데 이런 방식 은 2 배의 메모 리 를 차지한다. 
"이 건 문제 없어!" 라 고 생각 할 수도 있 습 니 다. q 와 b 를 비 워 두 면 됩 니 다. 그리고 쓰레기 로 회수 된다 고 생각 할 수도 있 습 니 다. 맞 습 니까?문제 가 해결 되 었 다!
4. 567913. 어?만약 배열 이 매우 작다 면 당연히 문제 가 없 을 것 이다. 그러나 대형 배열 이나 여러 번 반복 처리 해 야 할 때 메모리 가 제한 되 고 최적화 가 필요 하 다. 
순환 삽입
OK, 한 배열 의 내용 을 다른 배열 에 넣 어 보 자. 사용 하 자.
Array \ # push () 방법:

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

현재 q 에는 두 개의 원시 배열 의 내용 (q + b) 이 저장 되 어 있 습 니 다. 
메모리 최적화 가 잘 된 것 같 습 니 다. 
하면, 만약, 만약...
q. 배열 은 매우 작다.
b. 또 커 요?메모리 와 속 도 를 고려 할 때 작은 것 을
q. 삽입
b 앞.
unshift () 방법 대체
push () 를 사용 하면 됩 니 다. 대응 하 는 것 도 큰 것 부터 작은 것 까지 반복 해 야 합 니 다.

q = b = null; // `q` and `b`           

실 용적 인 기교
슬 프 게 도 for 순환 은 촌 스 럽 고 유지 하기 어렵다. 우리 가 더 잘 할 수 있 을 까?
일단 해 보 자.
Array#reduce :

//     `b`    `q`
for (var i=0; i < b.length; i++) {
    q.push( b[i] );
}

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

b = null;

Array \ # reduce () 와
Array \ # reduceRight () 는 높 고 크 지만 좀 무 겁 고 일반인 들 도 기억 하지 못 합 니 다. JS 규범 6 의
= > 화살표 함수 (arrow - functions) 는 코드 의 양 을 크게 줄 일 수 있 지만 각 배열 요소 에 대해 함수 호출 을 실행 해 야 하 는 것 도 슬 래 그 수단 입 니 다. 
그럼 다음 코드 는 어때요?

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

빅 이 더 커 졌어 요. 그 렇 죠?특히
unshift () 방법 은 앞 처럼 상 반 된 순 서 를 고려 할 필요 가 없습니다. ES6 의 전개 연산 자 (spread operator, 더하기
... 접두사) 는 더욱 고 급 스 러 워 집 니 다.
a. push (... b) 또는
b.unshift( ...a )
그러나 사실 이런 방법 은 너무 낙관적이다. 이 두 가지 상황 에서 a 나 b 를 전달 하 든
apply () 는 두 번 째 매개 변수 (apply 방식 으로 Function 을 호출 할 때 첫 번 째 매개 변 수 는 내부 에서 this, 즉 context, 문맥, 역할 영역) 로 변 합 니까? 아니면 사용 합 니까?
연산 자 를 펼 치 는 방식
arguments .
첫 번 째 주요 문 제 는 두 배의 메모 리 를 차지 하 는 것 입 니 다. (물론 임시 입 니 다!) 배열 을 함수 스 택 에 복사 해 야 하기 때 문 입 니 다. 또한 JS 엔진 에 따라 구현 알고리즘 이 다 르 기 때문에 함수 가 전달 할 수 있 는 매개 변수 수 를 제한 할 수 있 습 니 다. 
배열 에 백만 개의 요 소 를 추가 하면 함수 스 택 이 허용 하 는 크기 를 초과 할 것 입 니 다.
push () 또는
unshift () 호출. 이 방식 은 수천 개의 요소 에서 만 사용 할 수 있 기 때문에 일정한 범 위 를 초과 하지 않도록 제한 해 야 합 니 다. 
주의: 너 도 해 볼 수 있어.
splice (), 그 와
push(..)/unshift(..) 모두 같은 제한 이다.
한 가지 선택 은 이런 방법 을 계속 사용 하 는 것 이지 만, 차례 를 나 누 어 처리 하 는 것 이다.

// `b` onto `q`:
q = b.reduce( function(coll,item){
    coll.push( item );
    return coll;
}, q );

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

// or `q` into `b`:
b = q.reduceRight( function(coll,item){
    coll.unshift( item );
    return coll;
}, b );

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

등등, 우 리 는 코드 의 가 독성 (심지어 성능!) 을 손상 시 켰 습 니 다. 우리 가 포기 하기 전에 이 여정 을 끝 냅 시다. 
Array \ # concat () 는 오 랜 시련 을 겪 은 방법 으로 두 개의 (또는 여러 개의) 배열 을 조합 하 는 데 사 용 됩 니 다. 그러나 그 는 기 존의 하 나 를 수정 하 는 것 이 아니 라 새로운 배열 을 만 들 었 습 니 다. 
변통 하 는 수법 이 많 지만 장단 점 이 다 르 기 때문에 실제 상황 에 따라 선택해 야 한다. 
위 에 여러 가지 장점 / 단점 이 열거 되 어 있 습 니 다. 아마도 가장 좋 은 방법 은?
reduce (..) 와
reduceRight(..) 
당신 이 무엇 을 선택 하든지 간 에, 그것 을 당연하게 여 기 는 것 이 아니 라, 당신 의 수조 합병 전략 에 대해 비판 적 으로 생각해 야 한다.