[javascript] 새 배열을 만들지 않고 기존 JavaScript 배열을 다른 배열로 확장하는 방법

루프 기반 기술을 사용해야합니다. 이 페이지에서 사용을 기반으로하는 다른 답변 .apply은 큰 배열에서 실패 할 수 있습니다.

상당히 간결한 루프 기반 구현은 다음과 같습니다.

Array.prototype.extend = function (other_array) {
    /* You should include a test to check whether other_array really is an array */
    other_array.forEach(function(v) {this.push(v)}, this);
}

그런 다음 다음을 수행 할 수 있습니다.

var a = [1,2,3];
var b = [5,4,3];
a.extend(b);

.apply우리가 추가하는 배열이 클 때 DzinX의 답변 (push.apply 사용) 및 기타 기반 메소드가 실패합니다 (테스트 결과 Chrome의 경우 약 150,000 항목, Firefox의 경우 500,000 항목). 이 jsperf 에서이 오류가 발생하는 것을 볼 수 있습니다 .

두 번째 인수로 큰 배열을 사용하여 ‘Function.prototype.apply’를 호출하면 호출 스택 크기가 초과되어 오류가 발생합니다. MDN은 Function.prototype.apply를 사용하여 호출 스택 크기를 초과 할 위험에 대해 설명합니다. “적용 및 내장 함수”섹션을 참조하십시오.

이 페이지의 다른 답변과 속도를 비교하려면 이 jsperf를 확인하십시오 ( EttererOfCode 덕분에). 루프 기반 구현은을 사용하는 속도와 비슷 Array.push.apply하지만 약간 느립니다 Array.slice.apply.

흥미롭게도, 추가하려는 배열이 희소 인 경우 forEach위 의 기본 방법은 희소성을 활용하고 .apply기본 방법 보다 성능이 우수합니다 . 이것을 직접 테스트하려면 이 jsperf를 확인 하십시오.

그건 그렇고, forEach 구현을 다음과 같이 단축하기 위해 (나처럼) 유혹을받지 마십시오.

Array.prototype.extend = function (array) {
    array.forEach(this.push, this);
}

이것은 쓰레기 결과를 생성하기 때문에! 왜? 때문에 Array.prototype.forEach이 호출하는 함수에 세 가지 인수를 제공 – 다음은 다음과 같습니다 (element_value, element_index, 오기 source_array). forEach“forEach (this.push, this)”를 사용하면이 모든 것들이 반복 될 때마다 첫 번째 배열로 푸시됩니다 !

답변

arr1.push(...arr2);

var a = [1, 2, 3, 4];
var b = [5, 6, 7];

Array.prototype.push.apply(a, b);

a = [1, 2, 3, 4, 5, 6, 7];

a.push(...b); //a = [1, 2, 3, 4, 5, 6, 7]; 

while(b.length) {
  a.push(b.shift());
} 

a = [1, 2, 3, 4, 5, 6, 7];
b = [];

a = [1, 2];
b = [3, 4, 5];
$.merge(a,b);

Array.prototype.append = function(array)
{
    this.push.apply(this, array)
}

a = [1,2]
b = [3,4]

a.append(b)